ExtJS 4: grid: how to select a newly created record?

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

Solution 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).

Solution 2

like what @Tom said... use grid view to select your new record, althougt
you can still select your new record via selection model...

from docs.. select method need 3 parameter to pass..
so in your case :

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 via model*/
    grid.getSelectionModel().select(inst, true, true);

    /* select the newly created record via view*/
    grid.getView().select(inst, true, true);

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

Comments

[hspain]

I think it'll have something to do with the phantom flag on the record.

[Olivier Pons]

I've updated my question thanks to your comment. Thank you ;)

[Olivier Pons]

You are (almost) right. The grid.getView().select() was the right call to do (the one before is useless). But now the problem comes from store.sync(): if I call store.synch() the system can't find the record (it seems it kind of "looses" it). I'm getting closer, but not close enough. And I need to call store.synch() because the server sends back the default values, and I don't want the default values to be hard coded in my JavaScript code. Any idea how to do this?

[Egy Mohammad Erdin]

could you update your question with your current code or use jsfiddle.net? cause, when i tried the function with my dummy grid (no server interaction).. it still works

[Molecular Man]

Sorry, but ... what does it have to do with your original quesion?

[Olivier Pons]

The solution is a workaround, to not use what I'm asking, i.e. avoid selecting a new record, and just create it. Maybe a workaround is not a good answer. If so, I apologize, and I'll remove my own answer. See the userCreateValidate() function which calls sync() but doesn't need to select the record once it has been created.

[EagleFox]

Thanks Warung... you saved my day :)

[Dave]

Fails when store is sorted