PDA

View Full Version : patch for moving loading indicator on page grid toolbar



jbowman
13 Nov 2006, 6:44 PM
When adding to the paged grid toolbar, I ended up with the waiting indicator in the middle of various buttons on the toolbar, which didn't look right to me, so I moved it.

Here's the old toolbar, with my additions
http://whasit.com/images/oldtoolbar.jpg

After applying my patch, here's the new toolbar
http://whasit.com/images/newtoolbar.jpg

To apply the patch, add this block of javascript after you load yui-ext.js on any page you want to use it. This will affect all grids on that page, and this only moves the waiting indicator, it does not add any extra toolbar buttons (though you could easily modify it to do so).



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