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

时间:2017-05-11 14:29:58

标签: javascript extjs data-binding grid extjs6

先谢谢你的帮助......

我很难从ExtJS 6 Grid中选择第一行,因为它已经完全加载了它!

我已经尝试了几个事件,例如,加载,盒装,后投等......但似乎没有人能做到这一点!

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

任何有关如何执行此操作的示例都很棒。

这是我的网格:

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

2 个答案:

答案 0 :(得分:2)

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

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

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

根据Sencha文档,load事件

  

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

refresh事件

  

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

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

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

答案 1 :(得分:-1)

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