如何持久化 ExtJS 数据网格列隐藏/显示/移动/调整大小？

Posted 2023-02-22

【中文标题】如何持久化 ExtJS 数据网格列隐藏/显示/移动/调整大小？

【英文标题】：How can I persist ExtJS datagrid column hiding/showing/moving/resizing?

【发布时间】：2011-07-30 07:02:31

【问题描述】：

我想让用户对 ExtJS 数据网格的列显示（隐藏、显示、移动、调整大小）的更改持久化并存储在服务器上。有很多事件要监听，但在网格本身上注册处理程序似乎不会导致警报被调用：

    grid.on('hide', function(event)
        
        alert('Save column order: column hidden.');
        );
    grid.on('move', function(event)
        
        alert('Save column order: column moved.');
        );
    grid.on('resize', function(event)
        
        alert('Save column sizes: column resized.');
        );
    grid.on('show', function(event)
        
        alert('Save colum order: column shown.');
        );

（我的基本方法可能是最优的，也可能不是最优的。）

我具体应该怎么做才能监听这些事件？我可以在不触发警报的情况下隐藏、显示、移动和调整列大小。

【问题讨论】：

这适用于 GridPanel，但 EditorGridPanel 有问题。对于有状态的 EditorGridPanel 有什么建议吗？

别在意最后一个问题；我需要设置 stateId，然后一切都很开心。

【参考方案1】：

首先，你需要配置一个state provider。CookieProvider是ExtJS唯一内置的

Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

第二，将yourGridPanel.stateful标记为true

第三，看看是否需要更改GridPanel的默认值。stateEvents 这基本上是“一个事件数组，当被触发时，应该触发这个组件来保存它的状态”

第四， HttpStateProvider 没有内置在 ExtJS 中，但Saki 有一个ux (user extension) for it。

第五，如果你想保存多个组件的状态，它们应该明确设置id 或stateId。

一个好的方法是使用内置的CookieProvider 使其按预期工作，然后切换到Http Provider。

【讨论】：

这是一个 2.x 扩展，当我尝试从 3.x 运行它时，我得到“未定义不是函数”试图实例化 Ext.ux.HttpProvider()。关于获得 3.0 端口的任何建议？

是否可以存储所有网格行的状态？

@Shekhar - 网格状态与网格配置有关。不是您在行中看到的商店数据。您将需要在后端处理行的保存，并使用参数从存储中向服务器调用检索它们。

【参考方案2】：

网格应该有一个名为“有状态”的属性。将此设置为 True 并且网格应该记住列宽等。

【参考方案3】：

使用stateful: true 配置网格并设置其stateId（如果您的网格具有不会更改的ID，则可选）。同时初始化 Ext.state.Manager：

var thirtyDays = new Date(new Date().getTime()+(1000*60*60*24*30));
Ext.state.Manager.setProvider(new Ext.state.CookieProvider(expires: thirtyDays));

虽然不包含在 Ext 3 中，但您可以在网上找到使用 html5 的 localStorage 而不是 cookie 的状态提供程序。