How to add a "blank" entry to a ComboBox?

[ClemsonJeeper]

I want to have a ComboBox that is not editable and has set choices from a store, but I also want them to choose nothing as a valid choice as well.

How do I accomplish this? Ideally I'd like to have a blank entry by default, and when they click on the ComboBox, the blank entry is up top, with the other valid entries below.

thanks!

[dlbjr]

Try something llike this:

var ds = new Ext.data.JsonStore( {
     id : 'ds',
     url : 'some_url',
     root : 'data',
     fields: [ {
         name : 'item_id',
         type : 'string'
    }, {
         name : 'item_desc',
         type : 'string'
    }]
});
 
var r = Ext.data.Record.create([
     {name: 'item_id', mapping: 'item_id', type: 'string'},
     {name: 'item_desc', mapping: 'item_desc', type: 'string'}
]);
 
ds.on('load', function() {
     var r = new Record({
          item_id: '0',
          item_desc: '-----'
     });
     ds.insert(0, r);
});

[Condor]

You are creating the record class twice.

Use either:

var MyRecord = Ext.data.Record.create([
	{name: 'item_id', mapping: 'item_id', type: 'string'},
	{name: 'item_desc', mapping: 'item_desc', type: 'string'}
]);
var ds = new Ext.data.JsonStore( {
	id: 'ds',
	url: 'some_url',
	root: 'data',
	fields: MyRecord
	listeners: {
		load: function() {
			var r = new MyRecord({
				item_id: '0',
				item_desc: '-----'
			});
		ds.insert(0, r);
	}
});

or

var ds = new Ext.data.JsonStore( {
	id: 'ds',
	url: 'some_url',
	root: 'data',
	fields: [
		{name: 'item_id', mapping: 'item_id', type: 'string'},
		{name: 'item_desc', mapping: 'item_desc', type: 'string'}
	],
	listeners: {
		load: function() {
			var r = new (ds.recordType)({
				item_id: '0',
				item_desc: '-----'
			});
			ds.insert(0, r);
		}
	}
});

[ClemsonJeeper]

So is ----- a special string to extjs? Or will it indeed use "------" as the text for the choice? Is there no way to make it blank?

[dlbjr]

var r = new MyRecord({
item_id: '0',
item_desc: '-----'
});

The values '0' and '-----' can be what ever you want
Try '' for both if you like.

[dlbjr]

Oops! Just getting the visual point accross and not paying attention.

[ClemsonJeeper]

I've tried '' (previous to posting this). EG, I've created an entry with a value of '' for what is displayed, but since ExtJs calculates the size of the pulldown widget by the added heights of the entries in the pulldown, it is incorrect. '' doesn't expand to a full-sized entry, just one that is like 3 or 4 pixels.

So the empty choice exists, but it is impossible to see/click on unless you know its there. I would think the '' choice should be the same size as a choice with text in it.

[Condor]

You can simply fix that with a different tpl:

tpl: '<tpl for="."><div class="x-combo-list-item">{text:defaultValue("&nbsp;")}</div></tpl>'

(assuming your displayField is named 'text')

[ClemsonJeeper]

PERFECT. That did it!

Thanks!

[gotcha]

You can simply fix that with a different tpl:

tpl: '<tpl for="."><div class="x-combo-list-item">{text:defaultValue("&nbsp;")}</div></tpl>'

(assuming your displayField is named 'text')

If I use a '.', I get three entries, one of which is '.' .

Question - if I change '.' to 'BLANKTEXT', how come dropdown has no entries? I get the following error "BLANKTEXT is not defined"

var rec = new store.recordType({EMPID:'0', EMPNAME:'BLANKTEXT'});
store.add(trec);

var cb = new Ext.form.ComboBox({
        store: this.TableTypeStore,
        valueField:'EMPNAME',
        displayField:'EMPNAME',
        typeAhead: true,
        mode: 'local',
        triggerAction: 'all',
        selectOnFocus:true,
        editable:false,
        tpl: '<tpl for="BLANKTEXT"><div class="x-combo-list-item">{EMPNAME:defaultValue("&nbsp;")}</div></tpl>'
 });