重新排序ExtJS面板的子面板

Question

我有一個ExtJS面板，其中第一行和第二行包含一個標籤。後來我添加了4個子面板，每個面板都包含一個複選框和2個文本區域（主面板中的每個子面板）。然後我有2個上移/下移按鈕，每次點擊上/下按鈕時，這些子面板上/下按1行重新排序。我能夠用所有的子面板來佈局主面板，但是堅持重新排序子面板。如何在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，但招適用於早期版本，只需調整面板創作語法。