在ExtJS中使用reconfigure创建一个有状态网格

Question

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

是否有一种方法来创建一个有状态的网格(即保存列的状态等)，而在同一时间加载数据与reconfigure: true ?

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

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

状态保存在数据库中，stateId取决于组合框选择，这样我们就知道我们正在查看哪个配置以及根据组合选择加载什么状态。但是根据我们的理解，先应用状态，然后再重新配置，所以它总是把状态弄乱。

有人对此有什么想法吗?

如果你不完全明白我在做什么，请问，这样我可以详细说明。

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

现在，当你创建一个有状态的可重构网格时，会发生这样的事情:1. 网格被创建了2. 应用状态(来自数据库的状态)3.网格被渲染，但由于它没有数据/列，它有一个"空"状态4. 这个状态被保存了回来(实质上破坏了原始的正确状态)5. 存储被加载，列被添加，但有一个部分渲染(网格本身没有被重新渲染)。6. 现在的状态是默认的列状态它被保存回数据库

即使手动应用状态也没有任何作用，因为它不会被渲染。我们尝试了许多"渲染"选项，但似乎都不起作用。什么好主意吗?

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

瞧，你有一个"动态网格"(列是通过数据库中的保存状态定义的)，它是有状态的。