Search code examples
cordovasencha-touchsencha-touch-2cordova-3sencha-touch-2.1

Prevent movement of the interface ( bottom tool bar ) when using the keyboard


I know this old issue but any solution ? I don't want to push the toolbar ( bottom ) when using the keyboard . Regards,


Solution

  • Would it be a solution to catch the focus event of the textfield and setHidden(true) to the bottom tool bar?

    Ext.define('App.controller.Form', {
        extend: 'Ext.app.Controller',
    
        config: {
            refs: {
                textField: '.textfield'
            },
            control: {
                textField: {
                    focus: 'onTextFieldFocus',
                    blur: 'onTextFieldBlur'
                }
            }
        },
    
        onTextFieldFocus: function () {
            Ext.defer(function () {
                Ext.Viewport.down('#toolbarToHideOnKeyboardShow').setHidden(true);
            }, 50);
        },
    
        onTextFieldBlur: function () {
            Ext.defer(function () {
                Ext.Viewport.down('#toolbarToHideOnKeyboardShow').setHidden(false);
            }, 50);
            }
        });
    

    In this example you could simply add to all bottom toolbars the same itemId and it would always work. If you need this to work on all field types, add those or change it to field.