In extjs Multiselect-Kombinationsfeld, wie kann ich ausgewählten Wert in eine Box mit einem Kreuz-Symbol (überprüfen Snapshot)

Question

Ich habe ein Multiselect-Kombinationsfeld erstellt, wenn ich Werte auswählen, dann werden diese mit Komma getrennt angezeigt, aber jetzt will ich sie stilvoller wie im Schnappschuss. Snapshot

Answer 1

Wenn Ihr ExtJS 6.5 verwenden, können Sie die neue tagfield (siehe die Geschichte der es in der Dokumentation):

Die Tagfield ein Kombinationsfeld ist für mehrere Wertebearbeitung verbessert, Auswahl und einfache Verwaltung.

Wenn Sie Extjs 4 verwenden, schauen Sie sich den BoxSelect Thread in Senchas Forum an.

Answer 2

Sie können den ausgewählten Wert in ein Feld mit einem Kreuzsymbol einfügen, indem Sie in Ihrer Deklaration den Befehl xtype: 'tagfield' verwenden. unten ist das Codebeispiel dafür.

Ext.create('Ext.form.Panel', { 
     renderTo: Ext.getBody(), 
     title: 'GOT', 
     height: 200, 
     width: 500, 
     items: [{ 
      xtype: 'tagfield', 
      fieldLabel: 'Character Name', 
      store: Ext.create('Ext.data.Store', { 
        fields: ['id','name'], 
        data: [ 
         {id: 0, name: 'John Snow'}, 
         {id: 1, name: 'Tyrion Lannister'}, 
         {id: 2, name: 'Morgan Dexter'}, 
         {id: 3, name: 'Lannister'}, 
         {id: 4, name: 'Silicon Vally'} 
        ] 
       }), 
      displayField: 'name', 
      valueField: 'id', 
      queryMode: 'local', 
      filterPickList: true 
     }] 
    }); 

Arbeitsbeispiel in diesem Link. MultipleSelection Example