ExtJs 7.3 MODERN 中的有状态网格

时间:2021-02-02 13:23:35

标签: extjs

我不明白,根据 ExtJs 7.3 Modern 的手册,应该可以配置 Ext.grid.Grid (https://docs.sencha.com/extjs/7.3.0/modern/Ext.grid.Grid.html#cfg-stateful)。

我已添加:

({
  //  ...
  stateId: 'state-grid', 
  stateful: true, 
  // ... 
});

并且在列上还为每列添加了一个 stateId,并在我添加的应用程序启动功能中:

launch: function() {
        Ext.state.Provider.register(new Ext.state.LocalStorage());
        Ext.get(Ext.query('#appLoadingIndicator')).remove();
        this.callParent(arguments);
}

但是我没有让有状态的网格工作,即我隐藏了一个列然后刷新站点..该列仍然可见。 ExtJs 7.3 MODERN 中的有状态工作也是如此<---现代不是经典。

1 个答案:

答案 0 :(得分:0)

看看以下不言自明的小提琴样本。它保存了网格列的宽度和隐藏属性:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.state.Provider.register(new Ext.state.LocalStorage());

        var store = Ext.create('Ext.data.Store', {
            fields: ['name', 'email', 'phone'],
            data: [{
                'name': 'Lisa',
                "email": "lisa@simpsons.com",
                "phone": "555-111-1224"
            }, {
                'name': 'Bart',
                "email": "bart@simpsons.com",
                "phone": "555-222-1234"
            }, {
                'name': 'Homer',
                "email": "home@simpsons.com",
                "phone": "555-222-1244"
            }, {
                'name': 'Marge',
                "email": "marge@simpsons.com",
                "phone": "555-222-1254"
            }]
        });

        var grid = Ext.create('Ext.grid.Grid', {
            title: 'Simpsons',
            columns: [{
                text: 'Name',
                dataIndex: 'name',
                stateId: 'name-column-state-id',
                stateful: {
                    // we will state hidden and width of the column states only
                    hidden: true,
                    width: true
                }
            }, {
                text: 'Email',
                dataIndex: 'email',
                stateId: 'email-column-state-id',
                stateful: {
                    // we will state hidden and width of the column states only
                    hidden: true,
                    width: true
                }
            }, {
                text: 'Phone',
                dataIndex: 'phone',
                stateId: 'phone-column-state-id',
                stateful: {
                    // we will state hidden and width of the column states only
                    hidden: true,
                    width: true
                }
            }],
            store: store,
            layout: 'fit',
            fullscreen: true
        });

    }
});