docs - extjs 4 panel

ExtJS ComboBox: permite al usuario seleccionar ningún valor(nulo)

Question

Tengo un Ext ComboBox donde el usuario no puede elegir ningún valor. ExtJS no lo admite de fábrica.

Lo que he intentado:

use un segundo disparador que borre el valor

Funciona pero no es muy útil. Quiero una mejor solución.

agrega el elemento nulo "falso" para almacenar:

Mientras esto funciona, tendré que modificar el modelo para que permita valor nulo para id. Y esto se parece más a un truco.

establecer tpl personalizado como

''<ul class="x-list-plain">'',
''<li role="option" unselectable="on" class="x-boundlist">(no selection)</li>'',
''<tpl for=".">'',
''<li role="option" unselectable="on" class="x-boundlist-item">{name}</li>'',
''</tpl>'',
''</ul>''

Pero ahora se está poniendo realmente difícil, ahora idea cómo hacer que funcione correctamente.

jsfiddle:

http://jsfiddle.net/q5e3J/1/

con tpl personalizado: http://jsfiddle.net/q5e3J/2/

Answer 1

Puede usar el oyente "change" en la configuración del combo y verificar valores nulos:

change: function() {
if (this.getValue() === null) {
// Set default Value here
}
};

Answer 2

Consulte este enlace ¿Cómo agregar un elemento vacío al cuadro combinado de ExtJS?

Actualización: jsfiddle con esa solución implementada: http://jsfiddle.net/q5e3J/3/

var combo = Ext.create(''Ext.form.field.ComboBox'', {
renderTo: Ext.getBody(),
displayField: ''name'',
valueField: ''abbr'',
value: ''AL'',
store: Ext.create(''Ext.data.Store'', {
model: ''State'',
data: states
}),
queryMode: ''local'',
editable: false,
emptyText: ''No Selection'',
listConfig: {
tpl: ''<div class="my-boundlist-item-menu">No Selection</div>''
+ ''<tpl for=".">''
+ ''<div class="x-boundlist-item">{name}</div></tpl>'',
listeners: {
el: {
delegate: ''.my-boundlist-item-menu'',
click: function() {
combo.clearValue();
}
}
}
}
});