extjsextjs4.1ext4extjs-stores

Extjs - How to Fill combo boxes form a Single Store?


I have two comboboxes and I am using a single store that contains the data for 2 combo in 'sg' and 'aod' keys.

Lets say for the 1st combo I want to fill the data within 'sg' key

For the 2nd combo I want to fill the data with key called 'aod'

Then how I can fill the data while render the combos?

Here is my store:

var myStore = Ext.create('Ext.data.Store', {
  fields: [{
    name: 'sg'
  }, {
    name: 'aod'
  }],
  data: [{
      'sg': ['1', '2', '3', '4', '5']
    }, {
      'aod': ['15', '20']
    }

  ]
});


Here is my comobos inside items config

defaults: {
    labelAlign: 'top',
    width: '20%',
    style: {
      textAlign: 'center',
      color: '#0a4374',
      fontSize: '12px',
      fontWeight: 'bold'
    },
    labelSeparator: '',
    allowEmpty: false,
    editable: false,
    cls: 'extraComboBox',
    xtype: 'combo',
    autoSelect: true,
    margin: 10
  },
  items: [{
      fieldLabel: 'Combo 1',
      value: '',
      //Here I want to load myStore.data.items[0].data.sg								
    },

    {
      fieldLabel: 'Combo 2',
      value: '',
      //myStore.data.items[1].data.aod			
    }

Thanks for your help!!


Solution

  • By using myStore.getAt(0).get('sg') I am able to populate the data to 1st combo and same with 2nd combo myStore.getAt(0).get('aod').

    To set the default values for each combo add

    {
        fieldLabel: 'Combo 1',
        id: 'sg',
        store: myStore.getAt(0).get('sg').data,
        listeners: {
            afterrender: function (combo) {
                combo.setValue(myStore.getAt(0).get(combo.id).default);
            }
        }
    }, {
        fieldLabel: 'Combo 2e',
        id: 'aod',
        store: myStore.getAt(0).get('aod').data,
        listeners: {
            afterrender: function (combo) {
                combo.setValue(myStore.getAt(0).get(combo.id).default);
            }
        }
    
    }
    

    and change the json as follows:

    var myStore = Ext.create('Ext.data.Store', {
    
        fields: [
            {name: 'sg'}, 
            {name: 'aod'}
        ],
    
        data: [{
                'sg': {
                    'default': 1,
                    'data': ['1', '2', '3', '4', '5']
                }
            }, {
                'aod': {
                    'default': '15',
                    'data': ['15', '20']
                }
            }
        ]
    });