Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: UI Issue with selectfield when disabled in iPhone

  1. #1
    Sencha User
    Join Date
    Jun 2011
    Posts
    10
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Sencha User
    Join Date
    Jun 2011
    Posts
    10
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      0  

    Default

    Can I get your code as any code I am producing doesn't have this behavior.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  6. #5
    Sencha User
    Join Date
    Jun 2011
    Posts
    10
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  8. #7
    Sencha User
    Join Date
    Jun 2011
    Posts
    10
    Vote Rating
    0
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,551
    Answers
    3931
    Vote Rating
    1271
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  10. #9
    Sencha User
    Join Date
    Jun 2011
    Posts
    10
    Vote Rating
    0
      0  

    Default 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 Attached Images

  11. #10
    Sencha User
    Join Date
    Nov 2011
    Location
    Hong Kong
    Posts
    44
    Answers
    6
    Vote Rating
    0
      0  

    Default

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

Page 1 of 2 12 LastLast

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •