PDA

View Full Version : suggested change for the default toolbar for the paged grid



jbowman
13 Nov 2006, 6:07 PM
How about putting the load indicator first?

My first endeavour into extending it, I've used the add function to add items to it. This puts them after the waiting icon, which is after all the default functional buttons. Just seems it would make more sense having it all the way to the left so that all the clickable/editable stuff is after it.

Edit: Pics and code :)
Old Toolbar (including example of customizations)
http://whasit.com/images/oldtoolbar.jpg

New Toolbar
http://whasit.com/images/newtoolbar.jpg

New Toolbar code


YAHOO.ext.grid.PagedGridView.prototype.createPagingToolbar = function(container){
var tb = new YAHOO.ext.Toolbar(container);
this.pageToolbar = tb;
this.loading = tb.addButton({
tooltip: this.refreshText,
className: 'ygrid-loading',
disabled: true,
click: this.onClick.createDelegate(this, ['refresh'])
});
tb.addSeparator();
this.first = tb.addButton({
tooltip: this.firstText,
className: 'ygrid-page-first',
disabled: true,
click: this.onClick.createDelegate(this, ['first'])
});
this.prev = tb.addButton({
tooltip: this.prevText,
className: 'ygrid-page-prev',
disabled: true,
click: this.onClick.createDelegate(this, ['prev'])
});
tb.addSeparator();
tb.add(this.beforePageText);
var pageBox = document.createElement('input');
pageBox.type = 'text';
pageBox.size = 3;
pageBox.value = '1';
pageBox.className = 'ygrid-page-number';
tb.add(pageBox);
this.field = getEl(pageBox, true);
this.field.mon('keydown', this.onEnter, this, true);
this.field.on('focus', function(){pageBox.select();});
this.afterTextEl = tb.addText(this.afterPageText.replace('%0', '1'));
this.field.setHeight(18);
tb.addSeparator();
this.next = tb.addButton({
tooltip: this.nextText,
className: 'ygrid-page-next',
disabled: true,
click: this.onClick.createDelegate(this, ['next'])
});
this.last = tb.addButton({
tooltip: this.lastText,
className: 'ygrid-page-last',
disabled: true,
click: this.onClick.createDelegate(this, ['last'])
});
tb.addSeparator();
this.onPageLoaded(1, this.grid.dataModel.getTotalPages());
};

jack.slocum
13 Nov 2006, 6:35 PM
It looks good with other items, but when you put it first and you have no extra stuff on the toolbar it looks odd (IMO). With few other votes though I can be overridden. :)

In the meantime, definitely post this in the "Extras" forum.

jbowman
13 Nov 2006, 6:45 PM
ok, added it to the extra forums, hopefully with good enough instructions so as not to confuse anyone :)

Animal
14 Nov 2006, 12:37 AM
I've posted up an insertButton Toolbar method so that you can poke buttons into a Toolbar at any position. I think Jack has incorporated it. You could use that to put your new buttons in a logical place.

jarrod
14 Nov 2006, 9:18 PM
Hmm... we'll also need an insertSeparator?

Animal
14 Nov 2006, 11:55 PM
Should be easy to do.