javascript - ExtJS 6 - 从绑定(bind)完全加载后选择网格上的默认行？

Question

预先感谢您的帮助...

在从绑定(bind)完全加载 ExtJS 6 网格后，我很难从它中选择第一行!

我尝试了几个事件，例如加载、boxready、afterrender 等......但似乎没有一个能解决问题!

网格加载了绑定(bind)中的所有记录后，我应该使用什么事件从网格中选择一行？

任何关于如何做到这一点的例子都会很好。

这是我的网格:

        {
        xtype: 'gridpanel',
        cls: 'user-grid',
        routeId: 'languages',
        itemId: 'mainGrid',
        reference: 'mainGrid',
        bind: '{languages}',
        scrollable: false,
        tbar: [
            {
                xtype: 'button',
                text: 'foo',
                toolTip: 'bar',
                iconCls: 'x-fa fa-plus',
                handler: 'onFooClick'
            }
        ],

        viewConfig: {
            stripeRows: true,
            getRowClass: function(record) {
                var rowCls ='';
                if (record.get('is_active') === false) {
                    rowCls = 'inactive-row';
                }

                if (record.get('is_system') === true) {
                    rowCls = 'system-row';
                }
                return rowCls;
            }
        },

        columns: {
            items: [
                {
                    xtype: 'gridcolumn',
                    width: 40,
                    dataIndex: 'id',
                    text: 'id',
                    toolTip: 'the id'
                },
                {
                    xtype: 'gridcolumn',
                    cls: 'content-column',
                    dataIndex: 'name',
                    text: 'name',
                    toolTip: 'the name'
                    flex: 1
                }
            ]
        },
        dockedItems: [
            {
                xtype: 'pagingtoolbar',
                dock: 'bottom',
                itemId: 'userPaginationToolbar',
                reference: 'userPaginationToolbar',
                displayInfo: true,
                bind: '{languages}'
            }
        ]
    }

Answer 1

正如 @bullettrain 在评论中提到的，您可以监听商店上的事件并在事件处理程序中选择网格的第一条记录:

refresh: function (store, eOpts) {
    if (store.count() && !grid.selModel.hasSelection()) {
        grid.selModel.select(0);
    }
}

在事件处理程序中，您可以使用 store.count() 确保商店包含一些记录，并且用户尚未选择行!grid.selModel.hasSelection() .

根据 Sencha 文档，load事件

Fires whenever the store reads data from a remote data source

和 refresh事件

Fires when the data cache has changed in a bulk manner

这些事件中的任何一个都可能起作用，具体取决于您向商店添加数据的方式。

参见 fiddle here举个例子。