Comment ajouter un élément vide à Extjs ComboBox?
-
29-10-2019 - |
Question
Je souhaite ajouter et vider un élément (la valeur d'affichage est vide, la hauteur de l'élément est maintenue normale) à un ext.form.combobox. J'ai fait référence à 2 liens ci-dessous pour configurer mon ComboBox, mais il n'affiche toujours pas l'élément vide:
- http://www.ashlux.com/wordpress/2009/09/04/handling-empty-options-with-exxt-js-combo-box/
- http://www.sencha.com/forum/showthread.php?52340-How-to-add-a-quot-blank-quot-entry-to-a-combobox
Voici mon 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>'
});
Les données du magasin Combobox seront chargées après une demande AJAX (c'est-à-dire 3 éléments dans les éléments de données). Et le Combobox n'a que 3 éléments (pas 4 comme je m'y attendais). Avez-vous une idée de mon problème ?! Merci beaucoup!
La solution
Étant donné que vous ajoutez les valeurs comboBox plus tard, pourquoi ne pas simplement initialiser le magasin avec une valeur vide:
store : new Ext.data.JsonStore({
fields : ['id', 'fullName'],
data : [{id: 0, fullName: ''}]
}),
Plus tard quand tu fais store.add(theRestOfThem)
, ce blanc sera toujours là.
A dû revisiter cela aujourd'hui (15 avril 2017) pour les extjs 4.2:
Le moyen le plus simple consiste à inclure une chaîne vide dans le magasin comme ci-dessus, cela peut également être fait avec un écouteur de chargement sur le magasin:
listeners:
{
load: function(store, records)
{
store.insert(0, [{
fullName: '',
id: null
}]);
}
}
Puis ajoutez un tpl
Configurez-vous avec le ComboBox avec
Après le champ d'affichage:
tpl: '<tpl for="."><div class="x-boundlist-item">{fullName} </div></tpl>',
(Le champ d'affichage est fullName
Dans le cas OPS)
Autres conseils
Vous pouvez ajouter un enregistrement "vide" au début:
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>';
}
}
});
Lors de l'initialisation du composant, vous pouvez le faire (sur contrôleur):
populateMyComboBox([yourComboBoxComponent], true);
Sur la fonction de populate:
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);
}
C'est ainsi que nous pouvons ajouter un champ vide dans la boîte combinée
Dans Java Map ou toute autre collection, mettez une valeur clé comme celle-ci
fuelMap.put(""," "); // we need to add " " not ""," " or null
// because these will add a fine blank line in Combobox
// which will be hardly noticeable.
Dans fichier js, ça devrait être comme ceci:
Écouteur de la boîte combinée
listeners: {
select: function (comp, record, index) {
if (comp.getValue() === "" || comp.getValue() === " ") {
comp.setValue(null);
}
}
}
Dans EXT 4.2.1 (probablement d'autres), ajoutez simplement à ComboBox Config:
tpl : '<tpl for="."><div class="x-boundlist-item">{fullName} </div></tpl>'
Si le magasin utilise des données en ligne, alors store.load
Même ne tirera pas. Peut-être qu'il y a une meilleure solution, mais j'ai fini par insérer des enregistrements de magasin sur 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
}
},
}