Results 1 to 3 of 3

Thread: Combobox list still selected after reset form.

  1. #1
    Sencha User
    Join Date
    May 2013
    Posts
    4
    Vote Rating
    0
      0  

    Default Unanswered: Combobox list still selected after reset form.

    I have a Ext.form.ComboBox appended to Ext.form.Panel. Combo remember selection after form reset.

    To reproduce:
    1. Expand combobox
    2. Select value
    3. Run field reset() method (directly or with form reset)
    4. Expand again

    For example we have combo with 4 values: 1 empty, 2 red, 3 black, 4 blue. The default value is 1 combo is empty. Then we select 3 value, combo show black selected. And then decided to reset our field value. So we run reset method and combo value becomes empty again. But if we expand it, some method in ExtJS add to the 3 value class "x-boundlist-item-over" and it's looks like selected.

    Do you have any solutions?

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,388
    Answers
    716
    Vote Rating
    499
      0  

    Default

    It would help to see some code. Here is a quick example and it seems fine:

    Tested in fiddle, select framework version:
    https://fiddle.sencha.com/#home

    - Alabama is default
    - Entered texted in textfield, changed combo to 'Arizona'
    - Clicked reset, textfield empty, combo back to 'Alabama'
    - Opened combo, 'Alabama' is highlighted

    Code:
    var states = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data : [
            {"abbr":"AL", "name":"Alabama"},
            {"abbr":"AK", "name":"Alaska"},
            {"abbr":"AZ", "name":"Arizona"}
        ]
    });
    
    Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        width: 350,
    
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
    
        items: [{
            xtype: 'textfield',
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false
        },{
            xtype: 'combobox',
            fieldLabel: 'State',
            store: states,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            name: 'state',
            value: 'AL' // default
        }],
    
        buttons: [{
            text: 'Reset',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }],
        renderTo: Ext.getBody()
    });

  3. #3
    Sencha User
    Join Date
    May 2013
    Posts
    4
    Vote Rating
    0
      0  

    Default

    Quote Originally Posted by scottmartin View Post
    It would help to see some code. Here is a quick example and it seems fine
    Thank you for you answer. It's very helpful. In fiddle, if I choose 4.2.1.883 Neptune it's all ok. But, as I'm using 4.2.2 version, I'm tring to choose 5.0.0.736 and it's allow me to reporoduce my bug.

    So I'll add some modify to your code to be equivalent of mine.
    Quote Originally Posted by scottmartin View Post
    Code:
    var states = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data : [
            {"abbr":null, "name":" "}, // added this line
            {"abbr":"AL", "name":"Alabama"},
            {"abbr":"AK", "name":"Alaska"},
            {"abbr":"AZ", "name":"Arizona"}
        ]
    });
    
    Ext.create('Ext.form.Panel', {
        title: 'Simple Form',
        bodyPadding: 5,
        width: 350,
    
        layout: 'anchor',
        defaults: {
            anchor: '100%'
        },
    
        items: [{
            xtype: 'textfield',
            fieldLabel: 'First Name',
            name: 'first',
            allowBlank: false
        },{
            xtype: 'combobox',
            fieldLabel: 'State',
            store: states,
            queryMode: 'local',
            displayField: 'name',
            valueField: 'abbr',
            name: 'abbr', // change this line
            value: null // change this line
        }],
    
        buttons: [{
            text: 'Reset',
            handler: function() {
                this.up('form').getForm().reset();
            }
        }],
        renderTo: Ext.getBody()
    });

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
  •