Question

我正在尝试保存面板的视觉状态。 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值做同样的事情。我已经尝试在分割器上设置有状态和stateId。我试过没有事件，并使用stateEvents：['move']。我也尝试在左侧面板上设置有状态，并使用stateEvents调整大小。最后，我尝试在父面板上设置有状态，包括和不包含stateEvents：afterlayout。

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

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

Answer 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

您可以将resize事件添加到stateEvents中。

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

1 个答案: