在 ExtJS 中使用重新配置创建有状态网格答案

【问题标题】：Creating a stateful grid with reconfigure in ExtJS在 ExtJS 中使用重新配置创建有状态网格
【发布时间】：2014-09-13 10:58:47
【问题描述】：

我们这几天一直在努力实现这一目标，但似乎不可能。

有没有办法创建一个有状态网格（即保存列的状态等），同时使用reconfigure: true 加载数据？

本质上，我们拥有的是一个 combobox，它决定了 grid 有哪些 columns。

我们希望用户能够为每个 combobox 选项自定义 grid 的外观。每当组合框值更改时，我们使用reconfigure: true 加载 grid 以引入不同的 columns。但是我们不知道如何保存这些列的状态。

状态保存在带有stateId 的数据库 中，该stateId 取决于组合框 选项，以便我们知道我们正在查看哪个配置以及要查看哪个状态负载取决于组合选择。但据我们了解，首先应用状态，然后重新配置，所以它总是会弄乱状态。

有人对此有任何想法吗？

如果您不完全理解我要做什么，请询问，以便我详细说明。

编辑：我们发现了一些关于这个过程是如何工作的东西，但仍然没有答案。我们将尝试编辑 ExtJS 的核心代码，但我们更愿意找到不同的解决方案。

现在，当您创建有状态的可重新配置网格时，会发生以下情况： 1. 网格被创建 2.状态被应用（来自数据库的那个） 3. 网格被渲染，但由于它没有数据/列，它处于“空”状态 4. 这个状态被保存回来（基本上破坏了我们原来的正确状态） 5. 加载存储并添加列，但存在部分渲染（网格本身不会重新渲染）。 6. 现在的状态是带有列的默认状态，它被保存回数据库

即使手动应用状态也无济于事，因为它不会被渲染。我们尝试了许多“渲染”选项，但似乎没有任何效果。有什么想法吗？

【问题讨论】：

编辑问题没有帮助。回答就行了。我们都明白问几个
s 和 s 不会改变任何东西
有时，让某人为清晰起见编辑问题可以帮助其他人更好地理解问题并更有能力提供答案。看起来唯一的答案是在编辑之后才出现的，所以也许这确实有所作为。尽量不要对试图提供帮助但没有按照您希望他们提供的方式提供帮助的人生气。
确保以更好的方式格式化问题可能是一种尝试提供帮助的行为，但我们都知道通常情况并非如此。没有人四处走动，检查他是否知道答案，以及他是否至少不尝试帮助更好地格式化。他们可能只是为了满足他们的 SO 权利而寻找格式错误的问题。
实际上，康斯坦丁，我确实编辑了格式错误的问题，有时我无法回答。绝对是有风险的。
我们能够实现所要求的功能，但需要付出巨大的计算成本（因此最终将其移除）。如果我没记错的话，重新配置函数本身在调用时会破坏网格列的宽度和其他“有状态”属性。这就是我们实际使用grid.reconfigure(store, columns) 的原因，然后继续为每个列手动应用每个有状态属性，例如宽度、隐藏和列位置。而且因为我们的网格可能有 20 列，这会大大降低网格加载性能，因此我们将其删除。

标签： extjs grid stateful

【解决方案1】：

您可以覆盖 getState 和 applyState 函数以准确反映您的需求。

在 getState（获取当前状态，以便您的提供者可以将其保存到数据库）中，例如：

getState: function() {
    var me = this;
    var state = me.callParent();
    var storeState = me.store.getState();

    if (storeState) state.storeState = storeState;

    var columns = me.getColumnManager().getColumns();
    var stateColumns = [];
    columns.forEach(function(e) {
      stateColumns.push({
        text: e.text,
        dataIndex: e.dataIndex,
        hidden: e.hidden,
        flex: e.flex,
      });
    });

    state = me.addPropertyToState(state, 'columns', stateColumns);
    return state;
}

您可以灵活地将组件的任何状态保存到 state 属性中。在您的 setState 方法中，您可以检索保存的属性并根据它重新配置您的网格。

applyState: function(state) {
    var columns = state.columns;
    this.callParent(arguments);
    if (columns) {
      this.reconfigure(undefined, columns);
    }
}

瞧，你有一个“动态网格”（列是通过数据库中保存的状态定义的），它是有状态的。

【讨论】：