Изменение позиции диалога при изменении ориентации в Ext JS - PullRequest
Новая
       31

Изменение позиции диалога при изменении ориентации в Ext JS

0 голосов
/ 04 марта 2019

Я хочу отобразить Ext.Dialog в центре экрана, чего я достиг, используя метод showBy, как показано ниже. 

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

Работает нормально.Но когда я изменяю ориентацию в устройстве Android, положение диалогового окна меняется, и видна только половина диалогового окна.

Я попытался выполнить следующие шаги.

  1. При условии конфигурации по центру: true
  2. Используемый метод center динамически
  3. Событие Ориентация, кажется, удалено в Ext 6.7
  4. dialog.showBy (Ext.getBody (), 'c-c');
  5. dialog.showBy (Ext.Viewport, 'c-c');

Не удалось сделать это ни с одним из вышеперечисленных, любые подсказки для достижения этой цели.Я использую Ext JS 6.7

1 Ответ

0 голосов
/ 05 марта 2019

Я дам вам совет от 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
}

Я не знаю, был ли это самый правильный способк этому, но это сработало для меня!

Надеюсь, это поможет вам!

...