3.0.0

My first widget control, please provide feedback

The following widget does the paging for the grid. This is my first attempt at writing widgets in ActiveWidgets (which I am very impressed with).


Active.Controls.Pager = Active.System.Control.subclass();

Active.Controls.Pager.create = function(){
var obj = this.prototype;
obj.setClass("box", "active");
obj.labelstr = "";
obj.grid = null;

obj.setGrid = function(g) {
obj.grid = g;
}

obj.getGrid = function() {
return obj.grid;
}
// ------------------------------------------------------------
var first = new Active.HTML.INPUT;
first.setAttribute("type", "button");
first.setAttribute("value"," << ");
var prev = new Active.HTML.INPUT;
prev.setAttribute("type", "button");
prev.setAttribute("value"," < ");
var label = new Active.HTML.SPAN;
label.setStyle("display","inline");
label.setStyle("font", "menu");
var next = new Active.HTML.INPUT;
next.setAttribute("type", "button");
next.setAttribute("value"," > ");
var last = new Active.HTML.INPUT;
last.setAttribute("type", "button");
last.setAttribute("value"," >> ");

obj.setContent("first", first);
obj.setContent("prev", prev);
obj.setContent("label", label);
obj.setContent("next", next);
obj.setContent("last", last);
label.setContent(function () {return this.labelstr;});

obj.gotoPage = function (delta) {
var count = this.grid.getProperty("row/pageCount");
var num = this.grid.getProperty("row/pageNumber");
num += delta;
if (num < 0) {num = 0}
if (num > count-1) {num = count-1}
this.labelstr = " Page " + (num+1) + " of " + count;
this.grid.setProperty("row/pageNumber",num);
this.grid.refresh();
this.refresh();
}

var goNext = function (event) {
this.gotoPage(1);
}
var goPrev = function (event) {
this.gotoPage(-1);
}
var goFirst = function (event) {
this.gotoPage(-Infinity);
}
var goLast = function (event) {
this.gotoPage(Infinity);
}


next.setEvent("onclick", goNext);
prev.setEvent("onclick", goPrev);
first.setEvent("onclick", goFirst);
last.setEvent("onclick", goLast);
}
Active.Controls.Pager.create();
Krish
March 13,
I must say that now I am very impressed! This is exactly how I would implement it. Great job!

Can I add your code to the /patches collection?
Alex (ActiveWidgets)
March 13,
Alex, Thanks for the response and the compliment. I am happy to contribute to the codebase. Let me just clean it up first and resubmit the patch
Krish
March 13,
Updated control. Added a combo control to wrap HTML select.

COMBO widget Start
------------------------------

Active.HTML.Combo =Active.System.HTML.subclass();

Active.HTML.Combo.create = function(){
var obj = this.prototype;
var _super = this.superclass.prototype;

obj.options = new Array();
obj.setTag("select");

obj.addOption = function(val,txt) {
var opts = new Array(2);
opts[0] = val; opts[1] = txt;
this.options[this.options.length] = opts;
}

obj.innerHTML = function(){
var str = _super.innerHTML();
for(var i=0; i < this.options.length; i++) {
var opts = this.options[i];
str += "<option value='" + opts[0] + "'>" + opts[1] + "</option>"
}
return str;
}

}
Active.HTML.Combo.create();
------------------------ Combo Widget end

----------------------- Pager Widget Start

Active.Controls.Pager = Active.System.Control.subclass();

Active.Controls.Pager.create = function(){
var obj = this.prototype;
var first = new Active.HTML.INPUT;
var prev = new Active.HTML.INPUT;
var label = new Active.HTML.SPAN;
var next = new Active.HTML.INPUT;
var last = new Active.HTML.INPUT;
var psize = new Active.HTML.SPAN;

obj.setClass("box", "active");
obj.labelstr = "";
obj.grid = null;

obj.setGrid = function(g) {
obj.grid = g;
}

obj.getGrid = function() {
return obj.grid;
}

var setPageSize = function(event) {
this.grid.setProperty("row/pageSize", 10);
this.gotoPage(0);
}

// ------------------------------------------------------------
first.setAttribute("type", "button");
first.setAttribute("value"," << ");
prev.setAttribute("type", "button");
prev.setAttribute("value"," < ");
label.setStyle("display","inline");
label.setStyle("font", "menu");
next.setAttribute("type", "button");
next.setAttribute("value"," > ");
last.setAttribute("type", "button");
last.setAttribute("value"," >> ");
psize.setStyle("display","inline");
psize.setStyle("font", "menu");
psize.setStyle("margin-left", "20px");
psize.setContent("Page Size: ");
var combo = new Active.HTML.Combo;
with(combo) {
addOption("5","5");
addOption("10","10");
addOption("20","20");
addOption("30","30");
addOption("40","40");
addOption("50","50");
}
with(obj) {
setContent("first", first);
setContent("prev", prev);
setContent("label", label);
setContent("next", next);
setContent("last", last);
setContent("pagesize", psize);
setContent("combo", combo);
}
label.setContent(function () {return this.labelstr;});

obj.gotoPage = function (delta) {
var data = this.grid.getModel("data");
if(data == null) return;
if(data.isReady() == false) {
this.timeout(wait, 200);
return;
}
var count = this.grid.getProperty("row/pageCount");
var num = this.grid.getProperty("row/pageNumber");
num += delta;
if (num < 0) {num = 0}
if (num > count-1) {num = count-1}
this.labelstr = " Page " + (num+1) + " of " + count;
this.grid.setProperty("row/pageNumber",num);
this.grid.refresh();
this.refresh();
}

var wait = function() {
this.gotoPage(0);
}

var goNext = function (event) {
this.gotoPage(1);
}
var goPrev = function (event) {
this.gotoPage(-1);
}
var goFirst = function (event) {
this.gotoPage(-Infinity);
}
var goLast = function (event) {
this.gotoPage(Infinity);
}


next.setEvent("onclick", goNext);
prev.setEvent("onclick", goPrev);
first.setEvent("onclick", goFirst);
last.setEvent("onclick", goLast);
combo.setEvent("onchange", setPageSize);
}
Active.Controls.Pager.create();
----------------------- Pager widget end
Krish
March 13,
Oh! My God. It sounds great!
1. But, how can I put your "Combo Widget" in Active.Controls.Grid.
2. Can you provide "Input text Widget" control.
Rex Chen
March 18,
Hi. It's an excellent job. I tried to implement this and found that the "setPageSize" event handler for the combo is always setting a value of "10", instead of the selected value. How can it be fixed, if it's a mistake?

Thanks a lot.
John Walls
September 30,
Hi. I think that inside the "setPageSize" event handler the pageSize property should be set as "this.grid.setProperty("row/pageSize", event.srcElement.value);".

However, testing on IE, changing the PageSize property like this doesn't work: it shows all the elements, regardless of the paging...

Any help appreciated...
John Walls
September 30,
It looks like the problem above is just on the first page ...
September 30,
Additionally, for a full implementation of "pager" widget control, there must be a modification on sorting the grid, due to the fact that if the grid contains more than one page, sorting on any column should set the pager to the first page. I did this by adding the "myPager.gotoPage(-Infinity)" to the grid soft function...
September 30,
OK, maybe I am an idiot, but...

As I said I work almost all the time with PHP & SQL but I am not quite familiar with DHTML. I have no problem with CSS & JS, but I just never had a need to try...

Anyway.. It sound great, that paging can be added right into the grid. Maybe later we will find much more stuff to add.. but I just do not know where the patch should be added... Can you please hit me with a small advice ???

(Of-course it should be added to some file in grid.js sources but i just do not know where to make it work :((( )


ASJ
September 2,

This topic is archived.

See also:


Back to support forum

Search

Version 2

Looking for AW 2.6 ?
The old site is here.