Extjs - 如何填充组合框形成一个单一的商店？

Posted 2023-02-26

【中文标题】Extjs - 如何填充组合框形成一个单一的商店？

【英文标题】：Extjs - How to Fill combo boxes form a Single Store?

【发布时间】：2013-03-27 09:25:33

【问题描述】：

我有两个组合框，我正在使用一个存储，其中包含 '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			
    

感谢您的帮助！！

【参考方案1】：

您可以使用ComboBox.valueField

用于展示：Combobox.displayField

【参考方案2】：

通过使用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']
            
        
    ]
);