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();

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, 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

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

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.

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.

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...

It looks like the problem above is just on the first page ...

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...

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 :((( )