override/intercept component functions from plugin ????

[dcoan]

Hello Great Minds of the Sencha forum,

Please help me to understand the error of my ways.

I have a grid extension which is working well.

Now, I'm working on creating a plugin for the grid.

In the grid I have:



initComponent : function(){
...

this.store = new Ext.data.Store({
.....
// store is configured
.....
});


this.store.on("metachange", this.onMetaChange, this); // setup an event handler when store meta changes


}, // eo grid's initComponent function


onMetaChange = function(store, meta){ // the handler for the metachange event

alert(1); // successfully fired when the metadata changes


} // eo grid's onMetaChange function

Then, in the plugin I have this:



init : function(grid) {

grid.onMetaChange = grid.onMetaChange.createInterceptor(function(store,meta){

alert(2); // should fire (but doesn't)
return true; // return true, so that the original function will fire

});// end of intercepting function


So, normally (ie when the plug in is not attached to the grid), when the store metadata changes the grid's onMetaChange function is fired and the alert says "1". This works fine.

But, when I add the plugin to the grid, I expect that the createInterceptor will fire, and I will get this:

Alert: 2 // fired by the intercepting function (created in the plugin)
Alert: 1 // fired by the original function (created in the grid)

But no matter what I've tried (and I've tried a bunch of things and read the API)... I always get "1". The interceptor never fires.

What am I missing?

[Animal]

http://www.sencha.com/blog/2009/11/11/advanced-plugin-development-with-ext-js/

[dcoan]

Thanks Animal.

I had read that previously. Just so everyone knows, I managed to solve my problem. I've completed some revised versions of paging toolbar, a pagingtoolbar resizer, a GridPanelExpander, and Saki's RowActions plugins. I found that these plugins didn't necessary work well when I was plugging them into a grid which uses the metadata to build its column model.

By hooking into some of the methods in the grid's class and the gridview class, using interceptors, I was able to make it so that:

a) I could plugin any of the above plugins and have them work.
b) Make it so that the gridpanelexpander retained the open/closed state across grid refreshes (sorting, etc)
c) Added conditional functionality to the expander (ie only allow certain rows to have an expander)
d) Add a "hideUntilRollOver" configuration for the rowactions... so that the buttons only appear when the row is moused over (optional)

etc...

The biggest trick was the fact that a json configurable grid CHANGES its column model when metadata comes it...so I had to hook the grid's reconfigure method, and add columns to the cm (expander, rowactions) before the grid got reconfigured.


I guess the message you were trying to have me learn from reading the linked tutorial is that only certain methods in a class (the "template methods") can be hooked using interceptor.

However, in the API doc, if you look at the FUNCTION methods, it appears that we should be able to use createInterceptor with any function. If not, I think this would be a very good option.

So, for example, lets say I am creating a plugin for a component... and the component has a certain function (for example lets say a renderer function for a columnModel). The renderer may be config'd by the user at instantiation.

Wouldn't it be cool if we could create a plugin for the grid, that allowed the renderer to function as normal...but added an extra layer of functionality?.

For example: we could have a grid which each column having a particular renderer.
Then we could have a plugin which allows each existing renderer to function normally...but also highlights any text in the output that matches a search criteria.