ExtJS 5.x 如何在存储加载后更改网格视图 (viewConfig)？

Question

我在 ViewModel 中有一个商店，例如：

Ext.define('MyApp.page.PageModel', {
    extend: 'Ext.app.ViewModel',
    //...

    stores: {
        Posts: {
            model: //...
        }
    }
});

网格如下：

Ext.define('MyApp.page.MainView', {
    extend: 'Ext.panel.Panel',
    //...

    initComponent: function () {
        var me = this;
        //...

        me.items = [
            {
                xtype: 'grid',
                bind: {
                    store: '{Posts}'
                },
                columns: [ /* ... */ ],
                viewConfig: {
                    getRowClass: function (record) {
                        //...
                    }
                }
            }
        ];

        me.callParent(arguments);
    }
});

如何在存储加载后更改网格视图（在我的例子中）？

我尝试在网格事件（beforerender 和 viewready）中使用 mon 和 addManagedListener 方法，我尝试使用 on 和 addListener 方法来存储这些网格事件，但此解决方案不起作用。

有人有什么想法吗？

Answer 1

在 ExtJS 6 中，网格上有一个函数 setEmptyText 可以为您执行此操作：

initComponent: function () {
    var me = this;
    //...

    me.callParent(arguments);
    me.getStore().on('load', function() {
        me.setEmptyText(...);
    })
}

在 ExtJS 5 中，你必须自己做：

    me.getStore().on('load', function() {
       var emptyText = 'Test empty text';
       me.getView().emptyText = '<div class="' + me.emptyCls + '">' + emptyText + '</div>';
       me.getView().refresh();
    })

Relevant fiddle，将在渲染后 3 秒加载其存储。

Answer 2

我正在为 Ext.view.AbstractView 使用覆盖，只是为了在存储加载事件之前清除 emptyEl 和 viewEl

store.on('beforeload', function() {
    me.clearEmptyEl();
    me.clearViewEl();
});

这是我的完整覆盖

Ext.define('Ext.overrides.view.AbstractView', {
    override: 'Ext.view.AbstractView',

    onBindStore: function(store, initial, propName) {
        var me = this;

        me.setMaskBind(store);
        // After the oldStore (.store) has been unbound/bound,
        // do the same for the old data source (.dataSource).
        if (!initial && propName === 'store') {
            // Block any refresh, since this means we're binding the store, which will kick off
            // a refresh.
            me.preventRefresh = true;
            // Ensure we have the this.store reference set correctly.
            me.store = store;
            me.bindStore(store, false, 'dataSource');
            me.preventRefresh = false;
        }
        store.on('beforeload', function() {
            me.clearEmptyEl();
            me.clearViewEl();
        });
    }
});

ExtJS 5.x 如何在存储加载后更改网格视图 (viewConfig)？

ExtJS 5.x How to change grid view (viewConfig) after store load?

extjs

extjs5