2

我正在尝试保存面板的视觉状态。Panel 由两个子容器组成，具有 hbox/flex 布局和它们之间的拆分器。

{
  xtype:'panel',
  layout: {
    align: 'stretch',
    type: 'hbox'
  },
  items:[
    {
      xtype:'container',
      title: 'left panel',
      flex:1
    },
    {
      xtype:'splitter'
    },
    {
      xtype:'container',
      title: 'left panel',
      flex:2
    }
  ]
}

我已经有一个工作状态管理器。“左面板”包含一个网格，该网格很好地存储了它的列状态。状态管理器通过以下方式从控制器的 init 函数中触发：

var stateProvider=Ext.create('Ext.state.LocalStorageProvider');
Ext.state.Manager.setProvider(stateProvider);

网格使用框架标准方法通过设置 stateId: 'GridState' 和 stateful:true 来存储它的状态。

但是我无法弄清楚 ExtJS 希望我如何对主布局的 flex 值做同样的事情。我尝试在拆分器上设置 stateful 和 stateId。我试过不带事件，用 stateEvents: ['move']。我还尝试在左侧面板上设置有状态并使用 stateEvents 来调整大小。最后，我尝试在父面板上设置有状态，有和没有 stateEvents: afterlayout。

我知道在拆分器移动后可以获取事件。然后我可以将 flex 值存储为自定义状态并在布局/渲染过程中手动查找它们，但是我想对于一个看起来如此微不足道的问题必须有一个更标准的方法。

存储 hbox/vbox 布局的“拆分器位置”/“flex 值”的标准框架方法是什么？

4

1 回答 1

2

是的，有一种添加状态的标准方法。并且您的拆分器没有默认状态，因此您必须添加以下功能：

示例状态：

getState: function () {
    var me = this;
    var state = {};
    state.yourCustomState = 'state'; //you can save what you want
    return state;
},

applyState: function (state) {
    var me = this;

    if (state && state.yourCustomState) {
        //Do stuff
    }
}

你需要触发你的状态，你可以使用 stateEvents：http ://docs.sencha.com/extjs/4.1.3/#!/api/Ext.resizer.Splitter-method-addStateEvents

您可以将调整大小事件添加到您的 stateEvents。

于 2013-05-06T10:05:50.467 回答