How to add window orientation listeners in EXTJS?

Question

How to define window orientation listener that is attached only to specific view? For example if a mobile device is oriented in portrait orientation, I wouild like to show two columns of the grid, and otherwise I would show more columns.

After searching for solution, I found the idea here and here

However, I do not know how I can add listener to that event, and specifically that listener should be valid only for specific view, and not for the whole application.

score 1 · Accepted Answer · answered Jun 14 '21 at 22:55

You can use Viewport`s 'orientationchange' event handler in the 'initialize' of your view, something like this:

Ext.create('Ext.Panel', {
            title: 'My Panel',
            fullscreen: true,
            items: [{
                xtype: 'textfield',
                label: "Orientation",
                listeners: {
                    initialize: function (field) {
                        Ext.Viewport.on('orientationchange', function (viewPort, newOrientation, width, height) {
                            field.setValue(newOrientation);
                        });
                    }
                }

            }]
        });

How to add window orientation listeners in EXTJS?

1 Answers1