[ExtJS] 表格中使用状态管理器 (Using State Manager for Grid Columns)

ExtJS 提供了非常强大的状态管理器 (State Manager)，可以再许多组件上使用。
State Manager 允许您使用 LocalStorage 或 Cookies 保存视图的状态。只需初始化状态管理器并配置 stateful 和 stateId，即可轻松使用。

下面举个例子，创建一个 Grid，它可以自动保存列的位置、可见列等信息，下次创建表格会自动应用这些设置。

目前有两种类型的状态提供者 Ext.state.CookieProvider 和 Ext.state.LocalStorageProvider。
你可以通过扩展 Ext.state.Provider 类来实现自己的 Provider。
这里我使用 CookieProvider。

第一件事是初始化 StateManager 并声明 Provider。在 Application.js init 函数中执行此操作。

Ext.define('MyApp.Application', {
    extend: 'Ext.app.Application',
    name: 'MyApp',

    init : function() {
        Ext.state.Manager.setProvider(new Ext.state.CookieProvider({
            expires : new Date(Ext.Date.now() + (1000*60*60*24*90)) // 90 days
        }));
    },

    launch:function() {
        // Do something
    }
});

现在定义一个 Grid

Ext.define('MyApp.view.Users', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.users_grid',
    title: 'Users',
    stateful:true,
    stateId:'users_grid_stid',
    store:{
        data:[
            {
                first_name:'Joe',
                last_name:'Blogs'
            }
        ]
    },
    columns: {
        items: [
            {
                xtype: 'gridcolumn',
                dataIndex: 'first_name',
                text: 'First Name',
                width: 200
            },
            {
                xtype: 'gridcolumn',
                dataIndex: 'last_name',
                text: 'Last Name',
                width: 200
            }
        ]
    }
});

Grid 设置 stateful：true，并且设置了 stateId 为 users_grid_stid。

然后运行程序。

现在将 First Name 列移动到 Last Name 列的右侧。

刷新浏览器，您会注意到已保存cookie并且网格保持了列的状态。

通过 Cookie 实现这一点显然有其缺点，比如浏览器用户不允许使用 Cookie，而且可以存储的 Cookie 的大小和数量存在限制。
理想情况下，在生产应用程序中，你可能希望将其保存在服务器上。如前所述，您可以创建自己的 State Provider 来实现类似的功能。