¿Cómo agregar un elemento vacío al combobox ExtJS?

extjs4 extjs3

Question

Quiero agregar y vaciar el elemento (el valor de visualización está en blanco, la altura del elemento se mantiene normalmente) en un Ext.form.ComboBox. Me referí a 2 enlaces a continuación para configurar mi combobox, pero todavía no muestra el elemento vacío:

• http://www.ashlux.com/wordpress/2009/09/04/handling-empty-options-with-ext-js-combo-box/
• http://www.sencha.com/forum/showthread.php?52340-How-to-add-a-quot-blank-quot-entry-to-a-ComboBox

Aquí está mi código:

this.abcCombo = new Ext.form.ComboBox({
    name : ''abcCombo'',
    hiddenName : ''abcCombo-id'',
    fieldLabel : "My Combobox",
    width : 250,
    editable : false,
    forceSelection : true,
    mode : ''local'',
    triggerAction : ''all'',
    valueField : ''id'',
    displayField : ''fullName'',
    store : new Ext.data.JsonStore({
        fields : [''id'', ''fullName'']
    }),
    tpl : ''<tpl for="."><div class="x-combo-list-item">{fullName}&nbsp;</div></tpl>''
});

Los datos de la tienda combobox se cargarán después de una solicitud Ajax (es decir, 3 elementos en elementos de datos). Y el combobox tiene solo 3 ítems (no 4 como esperaba). ¿Tienes alguna idea sobre mi problema? Muchas gracias!

Answer 1

Así es como podemos agregar un campo en blanco en el cuadro combinado

En el Mapa de Java o en cualquier otra colección, ponga un valor clave como este.

fuelMap.put(""," "); // we need to add " " not ""," " or null 
                          // because these will add a fine blank line in Combobox 
                          // which will be hardly noticeable.

En el archivo js , debería ser así:

Listener para combo box

listeners: {
    select: function (comp, record, index) {
        if (comp.getValue() === "" || comp.getValue() === " ") {
            comp.setValue(null);
        }
    }
}

Answer 2

En Ext 4.2.1 (probablemente otros), simplemente agregue a la configuración de combobox:

tpl : ''<tpl for="."><div class="x-boundlist-item">{fullName}&nbsp;</div></tpl>''

Answer 3

Puedes agregar un registro "vacío" al principio:

 listeners: {
     load: function(store, records) {
          store.insert(0, [{
              fullName: '' '',
              id: null
          }]);
     }
  }

Answer 4

Si la tienda utiliza datos en línea, store.load ni siquiera se activará. Tal vez haya una solución mejor, pero terminé insertando los registros de la tienda en combobox.render :

{
    xtype: ''combo'',
    displayField: ''name'',
    valueField: ''value'',
    store: {
        type: ''MyInlineStore'',
    },
    listeners: {
        render: function(el){
            el.getStore().insert(0, [{name: ''[Any]'', value: ''''}]);
            el.setValue(''''); //select [Any] by default
        }
    },
}

Answer 5

Ya que agrega los valores del cuadro combinado más adelante, ¿por qué no simplemente inicializa la tienda con un valor en blanco?

store : new Ext.data.JsonStore({
    fields : [''id'', ''fullName''],
    data : [{id: 0, fullName: ''''}]
}),

Más adelante, cuando hagas store.add(theRestOfThem) , ese espacio en blanco seguirá allí.

Tuve que revisar esto hoy (15 de abril de 2017) para ExtJS 4.2:

La forma más sencilla es incluir una cadena vacía en la tienda como se indicó anteriormente, también se puede hacer con un detector de carga en la tienda:

listeners: 
{
    load: function(store, records) 
    {
        store.insert(0, [{
            fullName: '''',
            id: null
        }]);
    }
}

Luego agregue una configuración tpl al cuadro combinado con   después del campo de visualización:

tpl: ''<tpl for="."><div class="x-boundlist-item">{fullName}&nbsp;</div></tpl>'',

(el campo de visualización es fullName en el caso de OPs)

Answer 6

this.abcCombo = new Ext.form.ComboBox({
    name : ''abcCombo'',
    hiddenName : ''abcCombo-id'',
    fieldLabel : "My Combobox",
    width : 250,
    editable : false,
    forceSelection : true,
    mode : ''local'',
    triggerAction : ''all'',
    valueField : ''id'',
    displayField : ''fullName'',
    store : new Ext.data.JsonStore({
       fields : [''id'', ''fullName'']
    }),
    tpl : ''<tpl for="."><div class="x-combo-list-item">{fullName}&nbsp;</div></tpl>''

    //make sure to add this
    //if not added, empty item height is very small
    listConfig : {
        getInnerTpl: function () {
            return ''<table><tr><td height="12">{fullName}</td></tr></table>'';
        }
    }

});

Al inicializar el componente, puede hacer esto (en el controlador):

populateMyComboBox([yourComboBoxComponent], true);

en la función de poblar:

populateMyComboBox : function(comboBox, insertEmpty) {
    var list;
    if (insertEmpty) {
        list.push({id : 0, fullName : ''''});
    }

    var mStore = Ext.create(''Ext.data.Store'', {
        fields: [''data'', ''label''],
        data : list.concat([real_data])
    }),

    comboBox.bindStore(mStore);
}