Keyboard is open on click of selectField in Sencha Touch

Question

I have shown a dropdown in my app using the selectfield control. It is working fine when we click the arrow button but when user taps on text (input area), keyboard also getting opened. It is not an input field.

Here is my code:

{
    xtype: 'panel',
    itemId: 'mypanel23',
    listeners: {
        fn: function (component, eOpts) {
            component.add({
                /***DropDown issue***/
                xtype: sessionStorage.voiceOver == "on" ? 'panel' : 'selectfield',
                /***DropDown issue***/
                cls: 'myusage_select_list',
                id: 'billedDD',
                itemId: 'myselectfield',
                hideOnMaskTap: true,
                /***DropDown issue***/
                html: sessionStorage.voiceOver == "on" ? "<select class='myusage_select_list' id='billedDD_Accessibility'></select>" : '',
                /***DropDown issue***/
                defaultPhonePickerConfig: {
                    cancelButton: {
                        text: BellMCare.util.config.getLocalizationValue('MobilityMyUsage_Cancel'),
                        listeners: {
                            tap: function () {
                                var uAgent = navigator.userAgent;
                                if (uAgent.match(/Alcatel/i)) {
                                    this.up('picker').setHidden(true);
                                }
                            }
                        }
                    },
                    doneButton: {
                        //Sanity Issue - expiry date picker not working and screen struck                                
                        cls: 'pickerDoneBtn',
                        // Sanity Issue -End
                        text: BellMCare.util.config.getLocalizationValue('MobilityMyUsage_Done'),
                        listeners: {
                            tap: function () {
                                BellMCare.util.config.performanceLogs('PERFORMANCE LOGS | UI | Flow 4b | start ');

                                BellMCare.util.config.performanceLogs('PERFORMANCE LOGS | UI | Flow 4a or 4b  | Changed dropdown started  ');

                                var uAgent = navigator.userAgent;
                                if (uAgent.match(/Alcatel/i)) {
                                    this.up('picker').setHidden(true);
                                }
                            }
                        }
                    }
                },
                listeners: {
                    change: function (selectfield, newValue, oldValue, eOpts) {
                        if (oldValue != null) {
                            /**Dropdown Issue**/
                            BellMCare.app.getController("mobilityMyUsage").onBillCycleDropDownChange();
                            /**Dropdown Issue**/
                        }
                    },
                    focus: function (comp) {
                        var uAgent = navigator.userAgent;
                        if (uAgent.match(/Alcatel/i)) {
                            if (comp.getPhonePicker().isHidden()) {
                                comp.getPhonePicker().setHidden(false);
                            }
                        }
                    }
                }
            });
            /**Dropdown Issue**/
            Ext.getCmp("billedDD").innerHtmlElement.dom.addEventListener("change", function () {
                BellMCare.app.getController("mobilityMyUsage").onBillCycleDropDownChange();
            });
            /**Dropdown Issue**/
        },
        event: 'initialize'
    }
}

Answer 1

I managed it by the following code:

initialize: function(fld){
    var textboxEl = fld.element.query('input')[0];
    textboxEl.setAttribute('readonly', true);
}

Please let me know, if you have any doubt.