ExtJS 4：网格：如何选择新创建的记录？

Question

我的问题很简单，如标题所示！

这是我的代码：

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 }); 
},  

现在我只想让后面的行起作用

    /* select the newly created record */

！

我尝试了很多方法，但都不起作用：

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

有什么想法吗？

非常感谢

Answer 1

正如@Tom 所说...
使用网格视图来选择您的新记录，尽管
您仍然可以通过选择模型选择新记录...

从文档中...选择方法需要传递 3 个参数..
所以在你的情况下：

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 }); 
},

Answer 2

这是我发现的：当没有“id”字段时，ExtJS 似乎会丢失。
因此，在调用 sync() 后，如果您没有精确输入“id”字段，它会重新组织网格，并且找不到“旧”记录（我记得的就是在通话之前）。
这只是我的猜测，我可能是错的。

无论如何，我已经做出了转变：为了保持“同质”，我将创建 xxxCreate() 和 xxxCreateValidate()，对于 xxxUpdate 也是如此() 和 xxxUpdateValidate()。我已经为示例完成了它们： user => userCreate()、userCreateValidate()、userUpdate() 和 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();
},

我希望我的代码能有所帮助有人...现在我正在寻找一种处理网格中的键的方法。就像 ExtJS 的一切一样：你不用花时间编码，因为一切都已经完成了，你花时间搜索...实际上更令人沮丧 =)

无论如何，最需要注意的是新添加的记录未被选中。这只是继续开发的一种解决方法，但这不是我想要的（这并不完全是我在问题中要求的）。

Answer 3

我认为这里的问题是您尝试在调用 store.sync(); 后立即选择记录，但这实际上是异步请求，在从服务器获取数据后更新存储。

从服务器更新您的商店后，尝试调用grid.getSelectionModel().select。这种方法的问题是 store.sync 不支持任何回调方法，但您应该能够在商店上使用 datachanged 事件，该事件应该在商店之后触发同步全部完成。

尝试这样的事情（基于您提供的有限代码示例）：

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

    /* Create new empty record */
    var inst = store.add({})[0];

    store.on('datachanged', function() {
        /* select the newly created record, keep existing selection and
           don't suppress events because grid view is updating upon this event
        */
        grid.getSelectionModel().select(inst, true, false);
        Ext.create('GS.view.user.Edit', { create:true }); 
    });

    store.sync();
},

Answer 4

网格行选择通常在 View 对象中处理（在 ExtJS 3 中是 GridView）。所以我想如果你将上面的代码更新为：

grid.getView().select(0);

这将选择索引 0 处的行，该行看起来像您要添加新记录的位置。然后，View 对象将通知选择模型并更新浏览器视图。您可以通过 API 文档找到其他选择选项，网址为

Answer 5

当 grid.getSelectionModel().select 时，您的示例工作正常 (inst); 正在使用。因此，唯一可能导致这种行为的就是 store.sync(); 抛出异常。检查控制台输出是否有错误。

Answer 6

我不知道是否有可能直接选择此记录，因为在同步之前，该记录是存储中的虚拟记录，但同步后就不是了。另外，您可能会在服务器端为其分配一个 id（？），这会更改记录，并且在sync（）之后它不会相同...

如果记录中的某些字段是唯一的（例如名称或描述或任何内容），您可以在同步后使用它来查找此记录并选择它：

var value = store.getAt(0).get('name');           // getting the value of a unique field e.g. "name" from the newly added record

store.sync();

var rec = store.findRecord("name", value);   // find the record with the unique value "name" after sync
grid.getSelectionModel().select(rec);       // select that record

Answer 7

你可以简单地使用这样的：

grid.getSelectionModel().select(store.data.length-1)