PDA

View Full Version : Some useful extensions/overrides



ndtreviv
24 Apr 2009, 5:38 AM
I've been doing some work whereby we load a lot of objects via an updater using xtypes. I have come across a few situations whereby a utility or store needs to be identified in more than one area in a single component.

For example, when loading a GridPanel with a PagingToolbar, both the GridPanel and the PagingToolbar require the store on load, so both require the store to be declared on construction. This can be a pain when you're writing one big xtype and have no way of doing this.

So, I've produced a few overrides/extensions which seem to work nicely, hence me submitting them here for others to use if they so wish.

DISCLAIMER: Even though some of these are additional functions, not overrides of existing functions, I found that the Ext.extend did not work on the GridPanel - it complained at me about too much recursion. So I had to use override, and then decided to use override for all of them to keep it uniform...

LoadMask addition to allow you to set a store after the LoadMask has been created:


Ext.override(Ext.LoadMask, {
setStore: function(store){
if(!this.store){
var um = this.el.getUpdater();
um.un('beforeupdate', this.onBeforeLoad, this);
um.un('update', this.onLoad, this);
um.un('failure', this.onLoad, this);
} else {
this.store.un('beforeload', this.onBeforeLoad, this);
this.store.un('load', this.onLoad, this);
this.store.un('loadexception', this.onLoad, this);
}
this.store = store;
this.store.on('beforeload', this.onBeforeLoad, this);
this.store.on('load', this.onLoad, this);
this.store.on('loadexception', this.onLoad, this);
}
});


GridPanel override to allow you to get a GridPanel's LoadMask object if one has been set (although, on hindsight you could get it from the initialConfig...):


Ext.override(Ext.grid.GridPanel, {
getLoadMask: function(){
return this.loadMask;
}
});


PagingToolbar override to allow you to set the store AFTER the PagingToolbar's creation:


Ext.override(Ext.PagingToolbar, {
/**
* Defer store loading giving the option of loading a store later on using setStore (defaults to false)
* @type boolean
*/
deferStoreLoad: false,
initComponent : function(){
this.addEvents(
'change',
'beforechange'
);
Ext.PagingToolbar.superclass.initComponent.call(this);
this.cursor = 0;
if(!this.deferStoreLoad)
this.bind(this.store);
},
/**
* Sets a {@link Ext.data.Store} for this toolbar. If there is a store already set, it will be unbound and the new one set and bound in its place.
* @param {Ext.data.Store} store The data store to set for this toolbar
*/
setStore: function(store){
if(this.store){
this.unbind(this.store);
}
this.store = store;
this.bind(this.store);
}
});