Question

要处理方向更改，我的第一步是将主面板的布局类型从hbox修改为vbox，反之亦然，具体取决于方向，但Sencha不允许动态布局更改那一刻，我在互联网上找到了一个想法有人建议创建2个面板，一个hbox，另一个vbox，当有一个方向更改移动项目从一个面板到另一个面板，并显示/隐藏正确一，说我有以下代码：

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

如何将landscape-panel项移至portrait-panel？

Answer 1

像魅力一样：

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();
}

Answer 2

这就是我在ExtJs中所做的事情，它几乎与触摸中的完全相同

http://jsfiddle.net/Vandeplas/vx5739qn/

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');

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

2 个答案: