1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    10
    Vote Rating
    0
    PradeepAmradi is on a distinguished road

      0  

    Default Answered: UI Issue with selectfield when disabled in iPhone

    Answered: UI Issue with selectfield when disabled in iPhone


    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.

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

    Code:
    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.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    10
    Vote Rating
    0
    PradeepAmradi is on a distinguished road

      0  

    Default The problem can be clearly understood from this image.

    The problem can be clearly understood from this image.


    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

  5. #4
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    Can I get your code as any code I am producing doesn't have this behavior.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    10
    Vote Rating
    0
    PradeepAmradi is on a distinguished road

      0  

    Default Here is the code.

    Here is the code.


    @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!!!

  7. #6
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

    Code:
    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  8. #7
    Sencha User
    Join Date
    Jun 2011
    Posts
    10
    Vote Rating
    0
    PradeepAmradi is on a distinguished road

      0  

    Default Any other alternatinve/

    Any other alternatinve/


    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

  9. #8
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  10. #9
    Sencha User
    Join Date
    Jun 2011
    Posts
    10
    Vote Rating
    0
    PradeepAmradi is on a distinguished road

      0  

    Default It's Working!

    It's Working!


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

  11. #10
    Sencha User
    Join Date
    Nov 2011
    Location
    Hong Kong
    Posts
    44
    Answers
    6
    Vote Rating
    0
    Winnie Lam is on a distinguished road

      0  

    Default


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