在Ext JS中更改方向时对话框位置发生变化

Question

我想在屏幕中央显示Ext.Dialog，它是通过使用showBy方法实现的，如下所示。

dialog.showBy(view.lookupReference('btn'), 'c-c');

工作正常。但是，当我在android设备上更改方向时，对话框的位置也会更改，并且仅对话框的一半可见。

我尝试了以下步骤。

1. 提供的配置居中：true
2. 动态使用中心方法
3. orientationchange事件似乎已在Ext 6.7中删除
4. dialog.showBy（Ext.getBody（），'c-c'）;
5. dialog.showBy（Ext.Viewport，'c-c'）;

无法通过以上任何一种实现，任何实现此目的的提示。我正在使用Ext JS 6.7

Answer 1

我会从ExtJS 6.6给您建议，请注意，它可以从6.7更新。

不久前我遇到了同样的问题，我发现了此事件：https://docs.sencha.com/extjs/6.6.0/modern/Ext.viewport.Default.html#event-orientationchange

好吧，仅在视口上，但我没有找到其他解决方案。

实际上我是这样的：

在主视图的末尾初始化函数：

Ext.Viewport.on('orientationchange',  this.getController().OnOrientationChange, this.getController());

在我的主视图控制器上：

OnOrientationChange: function(viewport, orientation) {  
    viewport.mask();

    var actualWidth = window.innerWidth;
    var actualHeight = window.innerHeight;

    // Orientation check due to latence can fake orientation result
    if (orientation === "landscape") {
        if (actualWidth < actualHeight) {
            Ext.defer(this.OnOrientationChange, 100, this, [viewport, orientation]);
            return;
        }
    }
    else if (orientation === "portrait") {
        if (actualWidth > actualHeight) {
            Ext.defer(this.OnOrientationChange, 100, this, [viewport, orientation]);
            return;
        }
    }

    viewport.unmask();

    // Xtype liste of object would by notified
    var objXtypeList = ['dataview', 'carousel', 'signingarea'];

    for (var i = 0, max = objXtypeList.length; i < max; i++) {
        var objXtype = objXtypeList[i];
        var objList = viewport.query(objXtype);

        for (var j = 0, maxJ = objList.length; j < maxJ; j++) {
            var obj = objList[j];
            if (Ext.isFunction(obj.OnOrientationChange)) {
                Ext.defer(obj.OnOrientationChange, 50, obj, [orientation]);
            }
        }
    }
}

每个必须做出反应的对象的控制器：

OnOrientationChange: function(orientation) {
    // The way the object should react
}

我不知道这是否是最正确的方法，但这对我有用！

希望对您有帮助！