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

Question

Quiero agregar un elemento vacío (el valor de visualización está en blanco, la altura del elemento se mantiene como de costumbre) a un Ext.form.ComboBox.Me referí a 2 enlaces a continuación para configurar mi cuadro combinado, pero aún 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 de cuadro combinado se cargarán después de una solicitud Ajax (es decir, 3 elementos en elementos de datos).Y el cuadro combinado tiene solo 3 elementos (no 4 como esperaba). ¿Tienes alguna idea sobre mi problema? ¡Muchas gracias!

Answer 1

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

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

Más tarde, cuando hagas store.add(theRestOfThem), ese en blanco seguirá ahí.

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 escucha 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 OP)

Answer 2

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

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

Answer 3

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 rellenar:

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

Answer 4

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

En Java Map o 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 archivo js , debería ser así:

Oyente para cuadro combinado

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

Answer 5

En Ext 4.2.1 (probablemente otros), simplemente agregue a la configuración del cuadro combinado:

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

Answer 6

Si la tienda usa datos en línea, store.load ni siquiera se activará.Tal vez haya una solución mejor, pero terminé insertando 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
        }
    },
}