Question

I have a form bound to a grid where a user can either create a new user or select a row in the grid and edit a user. Selecting a row in a grid should change some button visibility. Anyway my main obstacle is that Ext seems not to be fully loaded on the row select event. The error I get in firebug is:

TypeError: Ext.getCmp(...) is undefined

Here is a snippet of code from my MVC controller:

....
init: function() {
    this.control({
        'userlist': {
            selectionchange: this.gridSelectionChange,
            viewready: this.onViewReady,
            select: this.onRowSelect
        },
        'useredit button[action=update]': {
            click: this.updateUser
        },

        'useredit button[action=create]': {
            click: this.createUser
        }
    });
},

onRowSelect: function(model, record, index, opts) {
    // Switch to the Edit/Save button
    //console.log(model);
    Ext.getCmp('pplmgr-user-create').hide();
    Ext.getCmp('pplmgr-user-create').show();
    Ext.getCmp('id=pplmgr-user-reset').show();
},
....

Is there some other method/event for accomplishing this? I’ve tried in both selectionchange and select events and I have also tried using the Ext.Component.Query and it just seems that Ext is not yet available in these events. I’d appreciate any assistance including informing me of a better practice to accomplish the same thing.

Answer 1

Ext.getCmp takes an id as its parameter. Your third call to it has id=..., the “id=” part is confusing getCmp, so it’s returning undefined.

If you change the last call to just the id, you should be ok:

Ext.getCmp('pplmgr-user-reset').show();