Question

目前是否支持根据设备方向更改布局？以下代码返回此错误：

 onOrientationChange: function () {
      this.remove();
       this.setLayout( Ext.Viewport.getOrientation() == 'landscape' ?
          { type: 'hbox', pack: 'center', align: 'stretch' } : { type: 'vbox', align: 'stretch', pack: 'center' } );
},

＆＃34;目前不支持在初始化一个布局后替换布局。＆＃34;

请任何人给我建议。

Answer 1

在GitHub上查看Sencha Meetcha应用程序的代码。

您可能需要做的事情，因为不支持替换布局，使用一些CSS技巧，当方向发生变化时，删除旧的cl并应用新的。

我自己没有尝试过，但演示应用似乎很好地进行了布局更改。

包含的代码段

orientationCls: ['home-portrait', 'home-landscape'],

doOrientation: function() {
    var me = this,
        orientation = Ext.Viewport.getOrientation(),
        letter = orientation.charAt(0),
        items = this.getItems().getRange(),
        i = 0,
        ln = items.length,
        item, el, top, left;

    me.element.removeCls(me.orientationCls);
    me.element.addCls('home-' + orientation);
    for (; i < ln; i++) {
        item = items[i];
        top = item.initialConfig[letter + 'top'];
        left = item.initialConfig[letter + 'left'];
        el = item.element;
        if (el) {
            el.setBox({
                top: top,
                left: left
            });
        }
    }
}

希望这有帮助

更改布局onOrientationChange

1 个答案: