如何使用组合框的第一个存储值作为默认值EXTJS

时间:2018-08-15 11:07:01

标签: arrays extjs

我需要使用组合框中出现的第一个值
直接使用像这样的值

xtype: 'combobox',
fieldLabel: 'Type',
name: 'type',
store: [
    'Bike'
    'Car',
    'Truck'
],
value: 'Bike' // this value

这很容易,因为给出了第一个值,但是我需要它像下面这样动态地显示

xtype: 'combobox',
fieldLabel: 'Type',
name: 'type',
store: this.type,
// value

它从数据库中获取类型,所以我不知道组合框中的第一个值

1 个答案:

答案 0 :(得分:1)

您将需要使用Store的 load事件对数据加载进行操作。之后,您可以使用ComboBox的

  

选择方法

设置值。

这是工作代码:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        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({
            xtype: 'panel',
            title: 'Parent Panel',
            frame: true,
            renderTo: Ext.getBody(),
            height: 500,
            width: 400,

            layout: {
                type: 'vbox',
                align: 'stretch'
            },

            items: [{
                xtype: 'combobox',
                store: states,
                displayField: 'name',
                valueField: 'abbr',
                listeners: {
                    afterrender: function(combo) {
                        combo.store.on('load', function(store, records) {
                            combo.select(records[0]);
                            console.log(combo, records);
                        });
                        combo.store.load();
                    }
                }
            }],

            collapsible: true
        });
    }
});

此处正在使用小提琴链接: https://fiddle.sencha.com/#view/editor&fiddle/2kgg