Dialog position changes on orientation change in Ext JS

Question

I want to display Ext.Dialog in the center of screen which i achieved by using showBy method as below.

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

It works fine. But when i change the orientation in android device dialog's position gets changed and only half of the dialog is visible.

I tried below steps.

Provided config centered: true
Used center method dynamically
orientationchange event seems to be removed in Ext 6.7
dialog.showBy(Ext.getBody(), 'c-c');
dialog.showBy(Ext.Viewport, 'c-c');

Couldn't make it with any of the above, Any hints to achieve this. I am using Ext JS 6.7

Since your screen orientation is changed none of the show related methods will work as show will not affect size of dialog. So in this case you will somehow need to update the component either by re-rendering. I think this can work by updateLayout(). Can you check once. — Tejas, Mar 05 '19 at 05:46
for re-rendering some event should trigger, as i can see in the docs orientationchange is removed and i dint found any alternative for it, any idea how to re-render then? — Jaydeep, Mar 05 '19 at 06:10

score 1 · Answer 1 · edited May 02 '20 at 10:06

I will give you advice from ExtJS 6.6, be careful it can be updated from 6.7.

I have face the same probleme not so long ago and I found this event : https://docs.sencha.com/extjs/6.6.0/modern/Ext.viewport.Default.html#event-orientationchange

Ok it's only on viewport but i don't found any other solution.

Actually I do something like that :

At the end of my main view initialize function :

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

On my main view controller :

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

Every object's controller that has to react :

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

I don't know if that was the most correct way to to it, but it's worked for me.

I had this thought earlier but even i was not sure if this will be the correct way. will give it a try. Thanks. — Jaydeep, Mar 05 '19 at 10:07

Dialog position changes on orientation change in Ext JS

1 Answers1

At the end of my main view initialize function :

On my main view controller :

Every object's controller that has to react :