View Full Version : Some useful extensions/overrides

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){
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.cursor = 0;
* 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){
this.store = store;