重新排序ExtJS面板的子面板

Question

我有一个在第一行和第二行包含标签的ExtJS面板。之后，我添加了4个子面板，每个子面板包含一个复选框，以及2个文本字段(每个子面板在主面板的一行中)。然后，我有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的，但技巧适用于早期版本，只需调整面板创建语法即可。