Extjs SenchaTouch-将项目从一个面板移动到另一个面板

为了处理方向更改，我的第一步是根据方向将主面板的布局类型从

hbox

修改为

vbox

，反之亦然，但Sencha暂时不允许动态布局更改，然后我在互联网上找到了一个想法。
有人建议创建两个面板，一个

hbox

和另一个

vbox

，当方向发生变化时，将项目从一个面板移动到另一个面板，并显示/隐藏正确的项目，比如我有以下代码：

{
    xtype: 'panel'
    id: 'landscape-panel',
    layout: 'hbox'
    items: [
        // My items
    ],
}, {
    xtype: 'panel',
    id: 'portrait-panel',
    layout: 'vbox',
    hidden: true
}

如何将

横向面板

项目移动到

纵向面板

？

工作起来很有魅力：

if (Ext.Viewport.getOrientation() == 'portrait') {
    var backupItems = Ext.getCmp('login-landscape-panel').items.items.slice(0); // clone array

    Ext.getCmp('login-portrait-panel').add(backupItems);
    Ext.getCmp('login-landscape-panel').removeAll();

    Ext.getCmp('login-landscape-panel').hide();
    Ext.getCmp('login-portrait-panel').show();
} else {
    var backupItems = Ext.getCmp('login-portrait-panel').items.items.slice(0); // clone array

    Ext.getCmp('login-landscape-panel').add(backupItems);
    Ext.getCmp('login-portrait-panel').removeAll();

    Ext.getCmp('login-portrait-panel').hide();
    Ext.getCmp('login-landscape-panel').show();
}

---

这就是我在ExtJs中所要做的，在touch中几乎是一样的

var viewport=Ext.create（'Ext.container.viewport'{
布局：“边框”，
项目：[{
xtype:'面板'，
itemId:'景观面板'，
布局：“hbox”，
项目：[{
xtype:'组件'，
宽度：100，
身高：100，
html:“组件1”
}, {
xtype:'组件'，
宽度：100，
身高：100，
html:“组件2”
}]
}, {
xtype:'面板'，
itemId:“纵向面板”，
布局：“vbox”，
隐藏：真的
}],
renderTo:Ext.getBody（）
});
var方向更改=功能（方向）{
var ppanel=viewport.down（“#纵向面板”），
lpanel=viewport.down（“#横向面板”），
项目，
i水平=（方向='H'）；
if（水平）{
items=ppanel.items.items；
如果（items.length>0）{
lpanel.add（项目）；
ppanel.removeAll（假）；
}
}否则{
items=lpanel.items.items；
如果（items.length>0）{
p.增加（项目）；
lpanel.removeAll（假）；
}
}
ppanel.setVisible（！isHorizontal）；
lpanel.setVisible（水平）；
};
方向改变（'V'）；
//方向改变（'H'）；

var hboxItems=Ext.Viewport.down（'panel[id=landscape panel]'）.getItems（）；Ext.Viewport.down（'panel[id=portait panel]'）。setItems（hboxItems）；我认为最好是在两个面板上都添加项目，并使一个面板一次可见。我有一张地图，那就不可能了wise@ProtoBassi它给了我这个错误：

uncaughttypeerror:undefined不是一个函数

你不需要循环：）add可以接受一个数组，并将组件缓存在变量中，而不是每次都获取它们。。它的cpu密集度更高（所以速度更慢）。但是做得很好；）

var viewport = Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [{
        xtype: 'panel',
        itemId: 'landscape-panel',
        layout: 'hbox',
        items: [{
            xtype: 'component',
            width: 100,
            height: 100,
            html: '<div>component 1</div>'
        }, {
            xtype: 'component',
            width: 100,
            height: 100,
            html: '<div>component 2</div>'
        }]
    }, {
        xtype: 'panel',
        itemId: 'portrait-panel',
        layout: 'vbox',
        hidden: true
    }],
    renderTo: Ext.getBody()
});

var orientationChange = function (orientation) {
    var ppanel = viewport.down('#portrait-panel'),
        lpanel = viewport.down('#landscape-panel'),
        items,
        isHorizontal = (orientation === 'H');

    if (isHorizontal) {
        items = ppanel.items.items;
        if (items.length > 0) {
            lpanel.add(items);
            ppanel.removeAll(false);
        }
    } else {
        items = lpanel.items.items;
        if (items.length > 0) {
            ppanel.add(items);
            lpanel.removeAll(false);
        }
    }
    ppanel.setVisible(!isHorizontal);
    lpanel.setVisible(isHorizontal);
};

orientationChange('V');
//orientationChange('H');