Come aggiungere un elemento vuoto alla casella combinata ExtJS?
-
29-10-2019 - |
Domanda
Voglio aggiungere e svuotare un elemento (il valore visualizzato è vuoto, l'altezza dell'elemento viene mantenuta normalmente) in un Ext.form.ComboBox.Ho fatto riferimento a 2 collegamenti di seguito per configurare la mia casella combinata, ma non viene ancora visualizzato l'elemento vuoto:
- 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
Ecco il mio codice:
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} </div></tpl>'
});
I dati del negozio della casella combinata verranno caricati dopo una richiesta Ajax (cioè 3 elementi negli elementi dati).E la casella combinata ha solo 3 elementi (non 4 come mi aspettavo). Hai idea del mio problema ?! Grazie mille!
Soluzione
Dato che hai aggiunto i valori della casella combinata in un secondo momento, perché non inizializzare il negozio con un valore vuoto:
store : new Ext.data.JsonStore({
fields : ['id', 'fullName'],
data : [{id: 0, fullName: ''}]
}),
In seguito, quando genererai un codice tag, quello vuoto sarà ancora lì.
Ho dovuto rivisitare questo oggi (15 aprile 2017) per ExtJS 4.2:
Il modo più semplice è includere una stringa vuota nello store come sopra, può anche essere fatto con un load listener nello store:
listeners:
{
load: function(store, records)
{
store.insert(0, [{
fullName: '',
id: null
}]);
}
}
Quindi aggiungi una configurazione store.add(theRestOfThem)
alla casella combinata con tpl
dopo il campo di visualizzazione:
tpl: '<tpl for="."><div class="x-boundlist-item">{fullName} </div></tpl>',
(il campo di visualizzazione è
nel caso degli OP)
Altri suggerimenti
Puoi aggiungere un record "vuoto" all'inizio:
listeners: {
load: function(store, records) {
store.insert(0, [{
fullName: ' ',
id: null
}]);
}
}
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} </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>';
}
}
});
dopo aver inizializzato il componente, puoi farlo (sul controller):
populateMyComboBox([yourComboBoxComponent], true);
sulla funzione di popolamento:
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);
}
In questo modo possiamo aggiungere un campo vuoto nella casella combinata
In java Map o in qualsiasi altra raccolta, inserisci un valore chiave come questo
fuelMap.put(""," "); // we need to add " " not ""," " or null
// because these will add a fine blank line in Combobox
// which will be hardly noticeable.
Nel file js , dovrebbe essere così:
Listener per casella combinata
listeners: {
select: function (comp, record, index) {
if (comp.getValue() === "" || comp.getValue() === " ") {
comp.setValue(null);
}
}
}
In Ext 4.2.1 (probabilmente altri), aggiungi semplicemente alla configurazione della casella combinata:
tpl : '<tpl for="."><div class="x-boundlist-item">{fullName} </div></tpl>'
Se il negozio utilizza dati in linea, store.load
non si attiverà nemmeno.Forse c'è una soluzione migliore, ma ho finito per inserire i record del negozio su 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
}
},
}