UI Issue with selectfield when disabled in iPhone

[PradeepAmradi]

hi,
There is a UI problem that i have been observing when selectfield is disabled. The masking at the end of the field(where a down arrow is present) is not complete. Is there a way to mask it completely as a mask on textfield(where mask is complete). I observed the problem in iphone,
Hoping for a reply.

[mitchellsimoens]

It is masked... you can't click on it. It has the CSS set as zero to these properties of the mask which will always mask the entire field: top, right, bottom, left.

[PradeepAmradi]

IMG_1019.PNG

UI problem can be seen from the image. That is a fieldset in a form. When form is disabled. The masking is not proper at the end of the fields. Any suggestions or workarounds would be greatly helpful

[mitchellsimoens]

Can I get your code as any code I am producing doesn't have this behavior.

[PradeepAmradi]

@mitchellsimoens here is the code.

App.views.SettingsFormView = {
xtype: 'formpanel',
scroll: 'vertical',
id: 'settingsform',
dockedItems: [{
xtype: 'toolbar',
title: 'Settings',
dock: 'top',
items: [{
xtype: 'spacer'
},{
xtype: 'button',
text: 'edit',
ui: 'action',
id: 'savesettings',
handler: function(button, event) {
if(button.getText() == 'edit') {
App.Viewport.down('#settingsform').enable();
button.setText('save');
}
else if(button.getText() == 'save') {

if all valid fields {
App.Viewport.down('#settingsform').disable();
button.setText('edit');
}
else {
// show errors for fields.
}
}
}
}]
}],
items: [{
xtype: 'fieldset',
id: 'billingdetails',
title: 'Billing Details',
defaults: {
listeners: {
change: function(curobj,newValue,oldValue) {
if(newValue != oldValue) {
var setvp = App.Viewport
setvp.down('#settingsform').updateRecord(setvp.down('#settingsform').getRecord());
}
}
}
},
items: [{
xtype: 'textfield',
name: 'name',
label: 'Name',
id: 'billname',
useClearIcon: true
},{
xtype: 'textfield',
name: 'address',
label: 'Address',
id: 'addr1',
useClearIcon: true
},{
xtype: 'textfield',
name: 'city',
label: 'City',
id: 'billcity',
useClearIcon: true
},{
xtype: 'selectfield',
name: 'state',
label: 'State',
id: 'billstate',
store: App.stores.States,
displayField: 'StateName',
valueField: 'StateCode'
},{
xtype: 'selectfield',
id: 'country',
name: 'country',
label: 'Country',
store: App.stores.Countries,
displayField: 'CountryName',
valueField: 'CountryCode'
},{
xtype: 'numberfield',
name: 'zipcode',
label: 'Zip',
id: 'zip',
useClearIcon: true
},{
xtype: 'zipfield',
name: 'phoneno',
id: 'phoneno',
label: 'Number',
useClearIcon: true
}]
}],
listeners: {
render: function(curobj) {
curobj.disable();
}
}
};

thanq u!!!

[mitchellsimoens]

Ok... turns out it was the useClearIcon element that was causing this. Try this override:

Ext.form.Field.override({
    onEnable: function() {
        if (this.clearIconContainerEl) {
            this.clearIconContainerEl.show();
        }

        this.fieldEl.dom.disabled = false;
    },

    onDisable : function() {
        if (this.clearIconContainerEl) {
            this.clearIconContainerEl.hide();
        }

        this.fieldEl.dom.disabled = true;
    }
});

This will affect any subclass of Ext.form.Field but those subclasses that don't have a clear icon won't error out. This actually had nothing to do with the select field.

[PradeepAmradi]

hi,
the problem still seems to exist. I tried with the above override but it doesn't change anything.. Any alternative would be greatly helpful. thanks

[mitchellsimoens]

I tried it on both my iPhone and the iOS simulator and the mask stretched because of the clear icon was still taking space but with that override it worked for me.

[PradeepAmradi]

Thank u mitchelsimeons! For some reason i was unable to get it at first, but it is working fine now.

[Winnie Lam]

The code didn't work for me, what did you do to make it works?