Extjs - 如何从单个商店填充组合框?

时间:2013-03-27 09:25:33

标签: extjs extjs4.1 ext4 extjs-stores

我有两个组合框,我使用的是一个商店,其中包含'sg'和'aod'键中2组合的数据。

让我们说第一个组合我想填写'sg'键

中的数据

对于第二个组合,我想用名为'aod'的键填充数据

然后我如何在渲染组合时填充数据?

这是我的商店:

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			
    }

感谢您的帮助!!

2 个答案:

答案 0 :(得分:2)

您可以使用ComboBox.valueField

显示:Combobox.displayField

答案 1 :(得分:1)

使用myStore.getAt(0).get('sg')我可以将数据填充到第一个组合,与第二个组合myStore.getAt(0).get('aod')相同。

设置每个组合添加的默认值

{
    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);
        }
    }

}

并按如下方式更改json:

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']
            }
        }
    ]
});