分離器移動後保存hbox寬度的狀態

Question

我試圖保存面板的視覺狀態。該面板由兩個子容器組成，其中包含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 
    } 
    ] 
} 

我已經有一個工作狀態管理器。 「左側面板」包含一個網格，並且網格正在存儲它的列狀態。從控制器的初始化函數，狀態管理大火由：

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

網格採用的框架標準方法用於存儲它通過設置STATEID狀態：「GridState」和狀態：真。

但是我無法弄清楚ExtJS如何讓我對主佈局的flex值做同樣的操作。我試過在分離器上設置stateful和stateId。我嘗試了沒有事件，並與stateEvents：['移動']。我也嘗試在leftpanel上設置有狀態，並使用stateEvents來調整大小。最後，我嘗試在父面板上設置有狀態，有和沒有stateEvents：afterlayout。

我知道在分離器移動後可以獲取事件。然後，我可以將flex值存儲爲自定義狀態，並在佈局/渲染過程中手動查找它們，但是我想對於似乎如此微不足道的問題必須有更標準的方法。

什麼是用於存儲hbox/vbox佈局的「分離器位置」/「flex值」的標準框架方法？

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。