Set Focus on cell/column when roweditor used

[TerryB]

Once again extjs has stumped me here. When the row is selected for edit, I just want the focus to be on the first editable cell/column in the row. You'd think it would do that automatically but none of cells have focus, you have to move cursor and click in cell. I tried using beforeedit listener but focus is not a valid function in that context.

Thanks!

[sean.lanktree]

I assume you are using a "cellediting" plugin? So are you clicking on a cell that is not defined as editable but expecting it find the first editable cell?

[TerryB]

Hi Sean. No it is roweditor plugin because there are a couple of fields that both must be filled in. I see if I can run the startEdit myself I can specify a column, according to some forum posts I saw. But when using clickToEdit config, you don't ever run that command. And I tried putting in beforeEdit, which was stupid because all I did was create an infinite loop. I don't see other event I could use.

It appears I could not use clickToEdit, use a button and then run startEdit myself. But I'd thought I'd ask if missed something before going to that extreme. Seem it would be common to just automatically focus first editable cell in row but what do I know. :-)

[Johnny Major]

Terry,

Here is a link to a fiddle that is accomplishing what we think you want. Below is the source:

Ext.create('Ext.data.Store', {
    storeId : 'simpsonsStore',
    fields  : ['name', 'email', 'phone'],
    data    : [{
        name  : 'Lisa',
        email : 'lisa@simpsons.com',
        phone : '555-111-1224'
    }, {
        name  : 'Bart',
        email : 'bart@simpsons.com',
        phone : '555-222-1234'
    }, {
        name  : 'Homer',
        email : 'homer@simpsons.com',
        phone : '555-222-1244'
    }, {
        name  : 'Marge',
        email : 'marge@simpsons.com',
        phone : '555-222-1254'
    }]
});

Ext.create('Ext.grid.Panel', {
    title    : 'Simpsons',
    store    : Ext.data.StoreManager.lookup('simpsonsStore'),
    columns  : [{
        header    : 'Name',
        dataIndex : 'name',
        editor    : {
            xtype      : 'textfield',
            allowBlank : false,
            listeners  : {
                afterrender : {
                    delay : 250,
                    fn    : function (cmp) {
                        // focus this field
                        //
                        cmp.focus();
                    }
                }
            }
        }
    }, {
        header    : 'Email',
        dataIndex : 'email',
        flex      : 1,
        editor    : {
            xtype      : 'textfield',
            allowBlank : false
        }
    }, {
        header    : 'Phone',
        dataIndex : 'phone'
    }],
    selModel : 'rowmodel',
    plugins  : {
        ptype        : 'rowediting',
        clicksToEdit : 1
    },
    height   : 200,
    width    : 400,
    renderTo : Ext.getBody()
});

[TerryB]

Ahhhhh. Do you have a sign in your office saying "Genius at Work"? You should. Works like a charm. At least I'm getting smart enough to ask when I think Extjs can't do something, because I'm usually wrong about that. Take care Sean.