组合框 <Extjs4 - 空行答案

【问题标题】：Combobox <Extjs4 - Empty line组合框 <Extjs4 - 空行
【发布时间】：2012-11-10 17:43:13
【问题描述】：

在开始之前，我很抱歉我的英语..我说得不好.. 所以我在 ExtJS4 中的 Combobox 有问题.. 我试图在我的组合框列表中添加一个空行，但它不行.. 我有一个空行的列表但是当我尝试选择它时我不能..所以如果有人可以帮助我或有一个例子，请

Ext.require([
    'Ext.form.*',
    'Ext.data.*',
    'Ext.tip.QuickTipManager'
]);

Ext.onReady(function () {
    Ext.QuickTips.init();


    var form = Ext.create('Ext.form.Panel', {
        renderTo: 'docbody',
        title: ' ',
        autoHeight: true,
        width: 600,
        bodyPadding: 10,
        defaults: {
            anchor: '100%',
            labelWidth: 100
        },
        items: [{
            xtype: 'fieldcontainer',
            combineErrors: true,
            msgTarget: 'side',
            fieldLabel: ' Name',
            items: [{
                width: 50,
                xtype: 'combo',
                mode: 'local',
                triggerAction: 'all',
                forceSelection: true,
                editable: false,
                selectOnFocus: true,
                name: 'title',
                displayField: 'name',
                valueField: 'value',
                tpl: '<tpl for="."><div class="x-combo-list-item">{name:defaultValue("--")}</div></tpl>',
                queryMode: 'local',
                store: Ext.create('Ext.data.Store', {
                    fields: ['name', 'value'],
                    data: [{
                        name: 'Mvr',
                        value: 'mr'
                    }, {
                        name: 'Mrs',
                        value: 'mrs'
                    }, {
                        name: 'Miss',
                        value: 'miss'
                    }],
                    listeners: {
                        'load': function (store, records, options) {
                            this.insert(0, '--');
                        }
                    }
                })
            }]
        }]

    });
});

【问题讨论】：

标签： extjs combobox extjs4

【解决方案1】：

除非将记录添加到您的商店会破坏程序逻辑中的其他内容，否则我建议您这样做并摆脱模板。

Ext.require([ 'Ext.form.', 'Ext.data.', 'Ext.tip.QuickTipManager' ]);

Ext.onReady(function() {
Ext.QuickTips.init();


  var form = Ext.create('Ext.form.Panel', {
    renderTo: Ext.getBody(),
    title   : ' ',
    autoHeight: true,
    width   : 600,
    bodyPadding: 10,
    defaults: {
        anchor: '100%',
        labelWidth: 100
    },
    items   : [
                {
                    xtype : 'fieldcontainer',
                    combineErrors: true,
                    msgTarget: 'side',
                    fieldLabel: ' Name',
                    items : [
                        {
                            width:          50,
                            xtype:          'combo',
                            mode:           'local',
                            triggerAction:  'all',
                            forceSelection: true,
                            editable:       false,
                             selectOnFocus : true,
                            name:           'title',
                            displayField:   'name',
                            valueField:     'value',
                            //tpl: '<tpl for="."><div class="x-combo-list-item">{name:defaultValue("--")}</div></tpl>',
                            queryMode: 'local',
                            store:          Ext.create('Ext.data.Store', {
                                fields : ['name', 'value'],
                                data   : [
                                    {name : 'Mr',   value: 'mr'},
                                    {name : 'Mrs',  value: 'mrs'},
                                    {name : 'Miss', value: 'miss'}
                                ],
                                listeners :
                                    {
                                    'load' : function (store, records, options) {
                                        store.add({name: '--', value: null});        
                                    }}
                            })
                        }
                    ]
                }
            ]

    });
});

【讨论】：