Question

I am using an Ext.Carousel to wrap 3 panels for my application. At a certain point, when the user clicks a button, I need a set of fields to pop up in an overlay.

Currently, when the user gives focus to one of these textfields, the carousel (now in the background) shrinks up to sit above the android keyboard, which makes everything behind this floating textfield look like garbage. Here is example code:

Ext.Viewport.add(Ext.create('Ext.Carousel', {
    fullscreen: true,
    items: [
        {
            xtype: 'panel',
            items: [
                {
                    xtype: 'button',
                    handler: function() {
                        entryField = Ext.create('Ext.Panel', {
                            hidden: true,
                            modal: true,
                            floating: true,
                            width: '100%',
                            height: 'auto',
                            items: [
                                {
                                    xtype: 'textfield'
                                }
                            ]
                        });
                        entryField.showBy(this);
                    }
                }
            ]
        },

        {
            xtype: 'panel'
        },

        {
            xtype: 'panel'
        }
    ]
}));

Answer 1

Solved:

The Viewport actually shrinks when the keyboard is pulled up. To solve this, just set the Viewport height to be the height of the screen when the app is initialized. That way, it will maintain this height rather than flex when the keypad emerges.