extjs2 - ExtJS パネルのサブパネルの並べ替え

Question

最初の行と 2 番目の行にラベルを含む ExtJS パネルがあります。後で、それぞれにチェックボックスと 2 つのテキストフィールド (メインパネルの行にある各サブパネル) を含む 4 つのサブパネルを追加しました。次に、上/下ボタンをクリックするたびに、これらのサブパネルを1行ずつ上/下に並べ替える2つの上/下に移動ボタンがあります。すべてのサブパネルを含むメイン パネルをレイアウトすることはできますが、サブパネルの並べ替えに行き詰まります。ExtJS でこの (サブパネルの並べ替え) 機能を処理するにはどうすればよいですか?

Answer 1

パネル要素を動的に変更するコツは、変更後に doLayout 関数を呼び出すことです。最もきれいではありませんが、問題の実際の例:

var Panel1 = Ext.create('Ext.form.Panel', {
    title: 'first',
    items: [{
        fieldLabel: 'text1',
        xtype: 'textfield'
    }, {
        fieldLabel: 'text2',
        xtype: 'textfield'
    }, {
        xtype: 'checkbox'
    }]
})

var Panel2 = Ext.create('Ext.form.Panel', {
    title: 'second',
    items: [{
        fieldLabel: 'text1',
        xtype: 'textfield'},
    {
        fieldLabel: 'text2',
        xtype: 'textfield'}]
})

var mainPanel = Ext.create('Ext.panel.Panel', {
    title: 'main',
    items: [Panel1, Panel2]
})

new Ext.Window({
    width: 300,
    height: 400,
    layout: 'fit',
    items: [mainPanel],
    bbar: [{
        text: 'reorder',
        handler: function() {
            var swap = mainPanel.items.items[0];
            mainPanel.items.items[0] = mainPanel.items.items[1];
            mainPanel.items.items[1] = swap;
            mainPanel.doLayout();
        }
    }]
}).show();

これは ExtJs 4.0.7 用ですが、パネル作成構文を調整するだけで、以前のバージョンでもトリックが機能します。