重新排序 ExtJS 面板的子面板答案

【问题标题】：Reordering the subpanels of an ExtJS panel重新排序 ExtJS 面板的子面板
【发布时间】：2012-06-06 16:36:46
【问题描述】：

我有一个 ExtJS 面板，它在第一行和第二行包含一个标签。后来我添加了 4 个子面板，每个子面板都包含一个复选框和 2 个文本字段（每个子面板在主面板的一行中）。然后我有 2 个上移/下移按钮，每次单击上/下按钮时，这些子面板将上/下重新排列 1 行。我能够用所有子面板来布局主面板，但卡在重新排序子面板上。如何在 ExtJS 中处理这个（重新排序子面板）功能？

【问题讨论】：

标签： extjs2

【解决方案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，但技巧适用于早期版本，只需调整面板创建语法。

【讨论】：