Keyboard is open on click of selectField in Sencha Touch

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.

selectfield

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'
}
}


1 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.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.