ExtJS 6 - 从绑定完全加载后选择网格上的默认行？答案

【问题标题】：ExtJS 6 - Select default row on a grid after fully loaded from binds?ExtJS 6 - 从绑定完全加载后选择网格上的默认行？
【发布时间】：2017-05-11 14:29:58
【问题描述】：

提前感谢您的帮助...

我很难从 ExtJS 6 Grid 中选择第一行，在它从绑定中完全加载之后！

我已经尝试了几个事件，例如加载、boxready、afterrender 等……但似乎没有一个能奏效！

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

任何例子都会很好地说明如何做到这一点。

这是我的网格：

        {
        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}'
            }
        ]
    }

【问题讨论】：

标签： javascript extjs data-binding grid extjs6

【解决方案1】：

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

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

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

根据 Sencha 文档，load 事件

每当商店从远程数据源读取数据时触发

还有refresh 事件

当数据缓存以批量方式更改时触发

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

请参阅小提琴 here 以获取示例。

【讨论】：

您好，谢谢您的评论，但是，我还不太明白。看看这个小提琴fiddle.sencha.com/#view/editor&fiddle/1vgc，如果你在网格上使用商店，它工作正常，如果你使用 bind 配置，网格行不会被选中！无论如何使用绑定是个好主意吗？
@CrazyMenConnected 那是因为商店还没有绑定到网格上。在您的小提琴中，如果您在设置选择之前console.log(grid.getStore())，您将看到它记录了默认的 ext 空存储。数据绑定是一把双刃剑！
好的，商店还没有绑定...那么什么事件，或者我可以做些什么来完成同样的行为？
@CrazyMenConnected 现在，我使用storechange 事件。在文档中，它被记录为仅由图表触发，我发现它也被网格和组合触发。

【解决方案2】：

试试：yourGrid.getSelectionModel().getSelection()[0].setStyle()。

【讨论】：

我应该在什么事件上放置该代码？我认为这是这里的主要问题，我找不到在网格加载所有绑定记录后触发的偶数！
好的，尝试使用加载事件，但在您的商店中调用它，这是为网格带来记录的商店：store.on('load', function(){ //do something } );