MVC - Grid with rowexpander, Unable to get Handle to View from within Controller

[theintz]

I need to capture the row extender plugin's "expandrow" event, in order the change the appearance of the row, once it has been expanded. The problem is I have not able to get a handle on the grid view to make the format change. (I am fairly new to Extjs and attempting to convert some Extjs 3 code to comply with the new MVC architecture).

Here is the controllers control method:

     this.control({
           '#alertsgridview': {
                afterrender: this.bindview,
                expandbody: this.expandbody
            }
     });

In order to provide a closure on the view (#alertsgridview) I defined a "bindview" method that binds the "expandbody" method to the view. as follows:

    bindview: function(view) {
        this.expandbody = Ext.bind(this.expandbody, view);
     },

The "expandbody" method is as follows:

expandbody: function(rowNode, record, expandRow, eOpts {
         if (record.get('unread')) {
            this.removeRowCls(rowNode, 'alert-unread');
            AlertHelper.markRead(record.get('id'));
            record.set('unread', false);
        }
        return true;
}

This appears to work find if not moved to controller, but when running in the controller the "this" reference in the "expandbody" references the controller rather than the view. The attempt to bind to the view with the "Ext.bind" appears not to work. I verified in Firebug that (1) "bindview" is executed and the "view" does reference the desired view object and (2) the "this" reference in "expandbody" does reference the controller and not the view.

What am I missing?

Tim

[skirtle]

Most events include a reference to the observable as their first argument for this very reason but some slipped through when ExtJS 4 was being updated. The expandbody event seems to be one of those.

I think your best bet is to catch this event on the component itself and re-fire a new event that includes a reference to the grid or view.

[theintz]

Thanks for the prompt reply.

Putting the event handling back to the view does seems to defeat the purpose of separating the event handling (Controller function) from the View itself. Is this something that will be fixed in a future release?

Also, I am curious why my solution of creating a closure (Ext.bind) between the handler function and the controller object did not work?

Again Thanks,

Tim

[skirtle]

Putting the event handling back to the view does seems to defeat the purpose of separating the event handling (Controller function) from the View itself.

That isn't what I was proposing.

It is the view's responsibility to fire appropriate events. In this case it isn't firing the event you need, so you have to add the event yourself. That is very different to putting the event handling into the view.

Is this something that will be fixed in a future release?

There are a number of events with this sort of problem (the selection events spring to mind) and the problem with 'fixing' them is backwards compatibility. My guess would be that this won't happen till ExtJS 5 (i.e. no time soon).

Also, I am curious why my solution of creating a closure (Ext.bind) between the handler function and the controller object did not work?

You're pulling the sleight-of-hand too late. The function has already been registered as the expandbody listener before you do the binding. Remember that you're passing the function to control, not its name.

If you wanted to get the binding to work you'd have to call control after you've done the bind.

I would highly recommend that you do not pursue the binding approach, you're tying a method on your controller to a particular instance of a view. If you really want to do something along these lines then you'd probably be better off registering the listener directly on the view from within your afterrender handler.

My first choice would still be to subclass the view to add an appropriate event rather than hacking it in the controller.

[theintz]

Thanks.

Your comments have been insightfull to someone fairly new to Extjs.

Tin