Wie füge ich ein leeres Element zur ExtJS-Combobox hinzu?
-
29-10-2019 - |
Frage
Ich möchte ein Element zu einer Ext.form.ComboBox hinzufügen und leeren (Anzeigewert ist leer, Elementhöhe wird normal beibehalten).Ich habe unten auf 2 Links verwiesen, um meine Combobox zu konfigurieren, aber das leere Element wird immer noch nicht angezeigt:
- 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
Hier ist mein Code:
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>' });
Die Daten des Combobox-Speichers werden nach einer Ajax-Anforderung geladen (d. h. 3 Elemente in Datenelementen).Und die Combobox hat nur 3 Artikel (nicht 4 wie ich erwartet hatte). Hast du eine Idee von meinem Problem?! Vielen Dank!
Lösung
Da Sie die Combobox-Werte später hinzufügen, können Sie den Speicher einfach mit einem leeren Wert initialisieren:
store : new Ext.data.JsonStore({
fields : ['id', 'fullName'],
data : [{id: 0, fullName: ''}]
}),
Später, wenn Sie store.add(theRestOfThem)
eingeben, ist dieser leere noch vorhanden.
Musste dies heute (15. April 2017) für ExtJS 4.2 erneut besuchen:
Der einfachste Weg besteht darin, eine leere Zeichenfolge wie oben beschrieben in den Store aufzunehmen. Dies kann auch mit einem Lade-Listener im Store erfolgen:
listeners:
{
load: function(store, records)
{
store.insert(0, [{
fullName: '',
id: null
}]);
}
}
Fügen Sie der Combobox anschließend eine tpl
-Konfiguration mit
nach dem Anzeigefeld hinzu:
tpl: '<tpl for="."><div class="x-boundlist-item">{fullName} </div></tpl>',
(das Anzeigefeld ist im OPs-Fall fullName
)
Andere Tipps
Sie können am Anfang einen "leeren" Datensatz hinzufügen:
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>';
}
}
});
Beim Initialisieren der Komponente können Sie dies (auf dem Controller) tun:
populateMyComboBox([yourComboBoxComponent], true);
in der Populate-Funktion:
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);
}
So können wir ein leeres Feld im Kombinationsfeld hinzufügen
Geben Sie in Java Map oder einer anderen Sammlung einen Schlüsselwert wie diesen ein
fuelMap.put(""," "); // we need to add " " not ""," " or null
// because these will add a fine blank line in Combobox
// which will be hardly noticeable.
In der js-Datei sollte dies folgendermaßen aussehen:
Listener für Kombinationsfeld
listeners: {
select: function (comp, record, index) {
if (comp.getValue() === "" || comp.getValue() === " ") {
comp.setValue(null);
}
}
}
Fügen Sie in Ext 4.2.1 (wahrscheinlich andere) einfach zur Combobox-Konfiguration hinzu:
tpl : '<tpl for="."><div class="x-boundlist-item">{fullName} </div></tpl>'
Wenn der Store Inline-Daten verwendet, wird store.load
nicht einmal ausgelöst.Vielleicht gibt es eine bessere Lösung, aber am Ende habe ich Geschäftsdatensätze in combobox.render
eingefügt:
{
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
}
},
}