Combobox

Question

Before starting I am sorry with my english.. I don't speak it well .. So I have a problem with the Combobox in ExtJS4 .. I tried to add a empty line in my combobox list but It's not ok .. i have the list with a empty line but when I trie to select it I can't.. so if someone can help me or have an example please

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, '--');
                        }
                    }
                })
            }]
        }]

    });
});

score 0 · Accepted Answer · answered Nov 11 '12 at 00:35

Unless adding a record to your store will break something else in your program logic, I would suggest doing that and getting rid of the template.

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});        
                                    }}
                            })
                        }
                    ]
                }
            ]

    });
});

Combobox

1 Answers1