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