默认在extjs组合框中

时间:2015-03-05 06:41:31

标签: javascript extjs extjs3

我正在使用extjs 3.4

这是我的代码:

Ext.onReady(function() {
        var myPanel = new Ext.Panel({
            renderTo : document.body,
            height   : 500,
            width    : 1000,
            title    : 'Simple Panel',
            html     : 'This is my content',
            frame    : true,
            items: {
            layout: 'form',
            width: 200,
            labelAlign: 'top',
            style: 'margin-top: 5px;',
            items: {        
                xtype: 'combo',
                id: 'x',
                width: 115,
                listWidth: 115,
                fieldLabel: '<b>My combo</b>',
                labelStyle: 'font-size: 11px;',
                style: 'margin-left:20px',
                labelSeparator: '',
                forceSelection: true,
                value: 'A',     
                store: ['A', 'B', 'c'],                 
                autoSelect: true                    
            }
    }
        });

    }); 

我想制作一个&#39; A&#39;作为默认值...现在它只显示&#39; A&#39;在组合框中...和&#39; B&#39;和&#39; c&#39;缺少(表示列表中缺少两个)

请帮忙

2 个答案:

答案 0 :(得分:0)

您没有正确定义商店或告诉组合商店中使用哪些字段。

尝试以下代码

var myPanel = new Ext.Panel({
    renderTo: Ext.getBody(),
    height: 500,
    width: 1000,
    title: 'Simple Panel',
    html: 'This is my content',
    frame: true,
    items: {
        layout: 'form',
        width: 200,
        labelAlign: 'top',
        style: 'margin-top: 5px;',
        items: {
            xtype: 'combo',
            id: 'x',
            width: 115,
            listWidth: 115,
            fieldLabel: '<b>My combo</b>',
            labelStyle: 'font-size: 11px;',
            style: 'margin-left:20px',
            labelSeparator: '',
            forceSelection: true,
            typeAhead: true,
            triggerAction: 'all',
            lazyRender:true,
            mode: 'local',
            value: 'A',
            store: new Ext.data.ArrayStore({
                id: 0,
                fields: [
                    'myId',
                    'displayText'
                ],
                data: [['A', 'A'], ['B', 'B'],  ['C', 'C']]
            }),
            valueField: 'myId',
            displayField: 'displayText',
            autoSelect: true
        }
    }
});

要注意的主要差异:

mode: 'local',
store: new Ext.data.ArrayStore({
            id: 0,
            fields: [
                'myId',
                'displayText'
            ],
            data: [['A', 'A'], ['B', 'B'],  ['C', 'C']]
        }),
        valueField: 'myId',
        displayField: 'displayText'

参考:ExtJs 3.4 Combo with Local Data

答案 1 :(得分:0)

mode : 'local'附加到combo配置。

可以将combobox与数组一起使用而不是存储(http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.form.ComboBox-cfg-store