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