Question

My question is so simple it’s in the title!

Here’s my code:

userCreate: function(button) {
    var grid = button.up('panel'),
        store = grid.getStore();

    /* Create new empty record */
    var inst = store.add({})[0];
    store.sync();
    /* select the newly created record */
    grid.getSelectionModel().select(inst.id);

    Ext.create('GS.view.user.Edit', { create:true }); 
},  

Now I just want the line after the

    /* select the newly created record */

to work!

I’ve tried many things but none of them work:

    grid.getSelectionModel().select(inst.id);
    grid.getSelectionModel().select(inst);
    grid.getSelectionModel().select(store.last);

Any idea?

Thank you very much

Answer 1

Here’s what I found: ExtJS seems to be lost when there’s no “id” field.
So after a call to sync() if you didn’t precise an “id” field, it kindof re-organize the grid and can’t find the “old” record (the one I remembered just before the call).
This is just what I guess, I may be wrong.

Anyway, I’ve made a turnaround: to stay “homogeneonous”, I’m going to make xxxCreate(), and xxxCreateValidate(), same for xxxUpdate() and xxxUpdateValidate(). I’ve done them for the example: user => userCreate(), userCreateValidate(), userUpdate() and userUpdateValidate():

init: function () {
    this.control({
        /* (!) Actions in 'userlist' */
        'userlist': {
            itemdblclick: this.userEdit
        },  
        'userlist button[action=create]': {
            click: this.userCreate
        },  
        'userlist button[action=delete]': {
            click: this.userDelete
        },  
        /* (!) Actions in 'useredit' */
        'useredit button[action=create]': {
            click: this.userCreateValidate
        },  
        'useredit button[action=save]': {
            click: this.userEditValidate
        }   
    }); 
},  

userCreate: function(button) {
    /* Using Ext.create() to pass variable create:true
     * instead of the shortcut:
     * var view = Ext.widget('useredit');
     */
    var view = Ext.create('GS.view.user.Edit', {
        create:true
    }); 
},  

userCreateValidate: function(button) {
    var win    = button.up('window'),
        form   = win.down('form'),
        values = form.getValues();

    this.getUsersStore().add(values);
    this.getUsersStore().sync();
    win.close();
},  

userEdit: function(grid, record) {
    var view = Ext.widget('useredit');
    view.down('form').loadRecord(record);
},  

userEditValidate: function (button) {
    var win    = button.up('window'),
        form   = win.down('form'),
        record = form.getRecord(),
        values = form.getValues();

    record.set(values);
    win.close();
    this.getUsersStore().sync();
},

I hope my code will help someone… now I’m looking for a way to handle keys in the Grid. And like everything with ExtJS: you don’t spend your time coding, because everything is already done, you spend your time searching… it’s more frustrating actually =)

Anyway, the most important thing to note is that the newly added record is not selected. It’s just a workaround to continue to develop, but it’s not what I wanted (it’s not exactly what I’m asking for in the question).