拆分器移动后保存 hbox 宽度的状态答案

【问题标题】：Saving state of hbox widths after splitter move拆分器移动后保存 hbox 宽度的状态
【发布时间】：2013-04-30 00:10:21
【问题描述】：

我正在尝试保存面板的视觉状态。 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 值”的标准框架方法是什么？

【问题讨论】：

标签： extjs extjs4 extjs4.2

【解决方案1】：

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

示例状态：

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。

【讨论】：