Extjs在文本字段中显示选定的组合值

Question

我几天前从extj开始，在我的标题中，我有一个Combobox和一个文本字段。

Combobox具有3个值，在ComboBox中选择其中一个值之后，该值不会出现在TextField

中。

这是我的商店：

Ext.define('Terms.store.groupStore', {
extend: 'Ext.data.Store',
alias: 'store.groupstore',
fields : [
    {
        name : 'groupName',
        type: 'string'
    },
    {
        name : 'accountId',
        type: 'int'
    }
],
data : [
    {
        groupName : 'GROUP1',
        accountId : '1'
    }, {
        groupName : 'GROUP2',
        accountId : '2'
    }, {
        groupName : 'GROUP3',
        accountId : '3'
    }
],
proxy : {
    type : 'memory',
    reader : {
        type : 'json'
    }
},
autoLoad : true
});

Combobox位于标题中，Textfield在其旁边：

    Ext.define('Terms.view.main.HeaderBar', {
    extend: 'Ext.Toolbar',
    xtype: 'headerBar',
    items: [
    {
        xtype: 'panel',
        layout: 'hbox',
        flex: 15,
        layoutConfig: {
        align: 'stretch'
        },
        items: [
            {
                xtype: 'panel',
                flex: 4,
                layout: 'hbox',
                renderTo: Ext.getBody(),
                defaults: {
                labelAlign: "left"
                },
                items: [
                      {
                          xtype: 'combobox',
                          name: 'accountId',
                          displayField : 'groupName',
                          valueField : 'accountId',
                          flex: 2,
                          id: 'accountId',
                          fieldLabel: 'Group',
                          labelWidth: 45,
                          store : {
                                    type : 'groupstore'
                          },
                          listeners: {
                                 change: function (combo, newValue, oldValue) {
                                var value_index = groupstore.find('accountId', newValue);
                                var record = groupstore.getAt(value_index);
                                         Ext.getCmp('fieldGroup').setValue(record.get("groupName"));
                                }
                          }
                      },
                      {
                          xtype: 'textfield',
                          flex: 2,
                          name: 'fieldGroup',
                          id: 'fieldGroup',
                          allowBlank : true,
                          hideTrigger : true,
                          valueField: 'fieldGroup',
                          store : 'groupstore',                           
                          style: 'margin-left: 10px;'                             
                      }
                      ]
                }
        ]
    }]
 });

Combobox从商店中加载了数据，我可以单击它并选择它，但是该值/数据不会出现在其旁边的Textfield中。有什么建议吗？

Answer 1

为此，您需要使用combo.getSelection()方法在change事件中获取所选的record。

在此小提琴中，我使用您的代码创建了一个演示，并在您的代码中进行了一些修改。我希望这将有助于/指导您达到要求。

代码段

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.define('Terms.store.groupStore', {
            extend: 'Ext.data.Store',
            alias: 'store.groupstore',
            fields: [{
                name: 'groupName',
                type: 'string'
            }, {
                name: 'accountId',
                type: 'int'
            }],
            data: [{
                groupName: 'GROUP1',
                accountId: '1'
            }, {
                groupName: 'GROUP2',
                accountId: '2'
            }, {
                groupName: 'GROUP3',
                accountId: '3'
            }]
        });
        Ext.define('Terms.view.main.HeaderBar', {
            extend: 'Ext.Toolbar',
            xtype: 'headerBar',
            items: [{
                xtype: 'panel',
                layout: 'hbox',
                layoutConfig: {
                    align: 'stretch'
                },
                items: [{
                    xtype: 'panel',
                    layout: 'hbox',
                    defaults: {
                        labelAlign: "left"
                    },
                    items: [{
                        xtype: 'combobox',
                        name: 'accountId',
                        displayField: 'groupName',
                        valueField: 'accountId',
                        flex: 2,
                        fieldLabel: 'Group',
                        labelWidth: 45,
                        store: {
                            type: 'groupstore'
                        },
                        listeners: {
                            change: function (combo, newValue, oldValue) {
                                //combo have method get selected record using {combo.getSelection()}
                                var selectedRecord = combo.getSelection();
                                //Instead of using Ext.getCmp() you can use up or down inside of component.
                                combo.up('panel').down('#fieldGroup').setValue(selectedRecord.get("groupName"));
                            }
                        }
                    }, {
                        xtype: 'textfield',
                        flex: 2,
                        name: 'fieldGroup',
                        itemId: 'fieldGroup',
                        allowBlank: true,
                        hideTrigger: true,
                        valueField: 'fieldGroup',
                        store: 'groupstore',
                        style: 'margin-left: 10px;'
                    }]
                }]
            }]
        });
        Ext.create({
            xtype: 'headerBar',
            fullscreen:true,
            renderTo: Ext.getBody()
        })
    }
});