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

Question

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

有没有一种方法可以创建一个有状态网格(即保存列的状态等)，同时使用reconfigure: true 加载数据？

本质上，我们拥有的是一个组合框，它决定网格 具有哪些列。

我们希望用户能够为每个组合框选项自定义网格的外观。每当组合框值发生变化时，我们都会使用 reconfigure: true 加载 grid 以引入不同的 columns。但是我们不知道如何保存状态对于那些列。

状态保存在数据库中，stateId取决于组合框的选择，这样我们就知道我们正在寻找的配置在什么状态加载取决于组合选择。但是据我们了解，首先应用状态，然后重新配置，因此它总是会弄乱状态。

有人对此有任何想法吗？

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

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

现在，当您创建有状态的可重构网格时，会发生以下情况:1. 网格被创建2.应用状态(来自数据库的状态)3. 网格被渲染但是因为它没有数据/列它有一个“空”状态4.这个状态被保存回来(基本上破坏了我们原来的正确状态)5. 商店被加载并且列被添加但是存在部分渲染(网格本身没有被重新渲染)。6. 现在的状态是带有列的默认状态，它被保存回数据库

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

Answer 1

您可以覆盖 getState 和 applyState 函数以准确反射(reflect)您的需求。

在 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);
    }
}

瞧，您有一个“动态网格”(列是通过数据库中保存的状态定义的)并且它是有状态的。