Wie füge ich ein leeres Element zur ExtJS-Combobox hinzu?

Question

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}&nbsp;</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!

Answer 1

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}&nbsp;</div></tpl>',

(das Anzeigefeld ist im OPs-Fall fullName)

Answer 2

Sie können am Anfang einen "leeren" Datensatz hinzufügen:

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

});

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

Answer 4

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

Answer 5

Fügen Sie in Ext 4.2.1 (wahrscheinlich andere) einfach zur Combobox-Konfiguration hinzu:

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

Answer 6

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
        }
    },
}