Combobox <Extjs4 - Empty line - extjs

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

Answer 1

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