PDA

View Full Version : How to disable the refresh button in paging tool bar?



dev_java
24 Feb 2012, 4:15 AM
Hi,

I am using a grid with paging tool bar . I need to disable the refresh button in paging tool bar.
here is the code which am working with.



var activePanel = Ext.create('Ext.grid.Panel',{
store: activeStore,
id:'activeGridPanel',
enableColumnMove: false,
frame:true,
border:false,
viewConfig: {
emptyText:'No records to display',
forceFit:true
},
columns: [
....
],
width:400,
height:500,
columnLines: true,
dockedItems: [
{
xtype: 'pagingtoolbar',
id:'activeStorePaging',
store: activeStore,
dock: 'bottom',
displayInfo: true
}

],
loadMask:true

});




//load the grid.
function loadActivegrid()
{

Ext.getCmp('activeStorePaging').moveFirst();
}


Is there any way to hide/disable the refresh button in paging tool bar???

Thanks in advance,
dev_java

friend
24 Feb 2012, 4:39 AM
Ext.getCmp('activeStorePaging').down('#refresh').setDisabled(true)


or



Ext.getCmp('activeStorePaging').down('#refresh').hide()



Also, you seriously need to get away from hard-coded IDs in your components... Consider using Ext.ComponentQuery.query('css3 style selectors') and component.up/down/child.

sskow200
24 Feb 2012, 7:20 AM
DOM queries can be expensive. Creating your own custom components is the way to go. Example:



Ext.define('CustomPagingToolbar', {
extend: 'Ext.toolbar.Paging',
alias: 'widget.custompagingtoolbar',

getPagingItems: function() {
var me = this;

return [{
itemId: 'first',
tooltip: me.firstText,
overflowText: me.firstText,
iconCls: Ext.baseCSSPrefix + 'tbar-page-first',
disabled: true,
handler: me.moveFirst,
scope: me
},{
itemId: 'prev',
tooltip: me.prevText,
overflowText: me.prevText,
iconCls: Ext.baseCSSPrefix + 'tbar-page-prev',
disabled: true,
handler: me.movePrevious,
scope: me
},
'-', me.beforePageText,
{
xtype: 'numberfield',
itemId: 'inputItem',
name: 'inputItem',
cls: Ext.baseCSSPrefix + 'tbar-page-number',
allowDecimals: false,
minValue: 1,
hideTrigger: true,
enableKeyEvents: true,
selectOnFocus: true,
submitValue: false,
width: me.inputItemWidth,
margins: '-1 2 3 2',
listeners: {
scope: me,
keydown: me.onPagingKeyDown,
blur: me.onPagingBlur
}
},{
xtype: 'tbtext',
itemId: 'afterTextItem',
text: Ext.String.format(me.afterPageText, 1)
},
'-',
{
itemId: 'next',
tooltip: me.nextText,
overflowText: me.nextText,
iconCls: Ext.baseCSSPrefix + 'tbar-page-next',
disabled: true,
handler: me.moveNext,
scope: me
},{
itemId: 'last',
tooltip: me.lastText,
overflowText: me.lastText,
iconCls: Ext.baseCSSPrefix + 'tbar-page-last',
disabled: true,
handler: me.moveLast,
scope: me
},
'-',
{
itemId: 'refresh',
disabled: true, //<-----add config
tooltip: me.refreshText,
overflowText: me.refreshText,
iconCls: Ext.baseCSSPrefix + 'tbar-loading',
handler: me.doRefresh,
scope: me
}];
}
});

sskow200
24 Feb 2012, 7:23 AM
An alternative solution using the same idea would be something like this...



Ext.define('CustomPagingToolbar', {
extend: 'Ext.toolbar.Paging',
alias: 'widget.custompagingtoolbar',

getPagingItems: function() {
var me = this,
items = this.callParent(arguments),
refreshConfig = items[items.length -1]; //very last config

//add new config
refreshConfig.disabled = true;

return items;

}
});

deepak.sakpal
30 May 2012, 1:30 AM
How to use this in Combo Box (paging enabled) ?