Wie man Kontrollkästchen in extjs Tagfield hinzufügen

Ich war in der Lage, eine Multiselect-Combobox mit Select all Feature mit dieser Geige http://jsfiddle.net/dFEsc/16/ zu erstellen, arbeitet Combobox Bild wird unten gezeigt. Ich möchte jetzt ein Tag-Feld mit Checkboxen erstellen. Der folgende Code funktioniert nicht. Tatsächlich arbeitet das ganze tpl nicht.Wie man Kontrollkästchen in extjs Tagfield hinzufügen

expand: { 
fn: function() { 
var dropdown = Ext.get(id).dom.parentElement; 
var container = Ext.DomHelper.insertBefore(dropdown, '<div id="'+id+'-container"></div>', true); 
toolbar.render(container); 
}, 
single: true 
}

Gibt es irgendeine Weise, die ich den gleichen Code auf ein extjs Tagfield anwenden können?

Quelle

2016-11-11 Gaurav

ExtJs hat ein richtiges Tag-Feld mit echten Tags, was mit Kontrollkästchen ist der Punkt? –

So funktioniert das Tagfield nicht, Sie versuchen das TagField wieder in eine ComboBox mit MultiSelect umzuwandeln. Mein Rat an Sie ist, eine eigene Komponente zu erstellen, die die ComboBox erweitert und MultiSelect verwendet (das ist, was TagField tut). –

Danke Guilherme hat Ihren Standpunkt. Ich habe ein Plugin für Combobox erstellt, dessen Bild in der Frage angehängt wurde. Es funktioniert korrekt, das Problem ist, dass ich die Multiselect-Eigenschaft verwendet habe, die in Extjs veraltet ist. Es kann Probleme in naher Zukunft verursachen – Gaurav

Ich stimme dem überein, was Guilherme gesagt hat.

Falls das Tagfeld mit Combobox von Ihrem Kunden angefordert wurde (und nicht anders sein kann), hier ist ein Vorschlag (wenn auch etwas aufwendig).

Hinweis: Dies schafft nur einen visuellen Effekt für den Benutzer, da Tagfield dies nicht braucht als

{ 
xtype: 'tagfield', 
fieldLabel: 'MyTagfield', 
name: 'name', 
valueField: 'id_name', 
displayField: 'name', 
queryMode: 'local', 
bind: { 
    store: '{mystore}' 
}, 
emptyText: '', 
delimiter: '', 
submitEmptyText: false, 
allowBlank: false, 
allowOnlyWhitespace: true, // this is important 
enableKeyEvents: true, 
multiSelect: true, 
selectOnFocus: false, 
editable: false, 
stacked: true, // better with this config 
listConfig: { 
     tpl: Ext.create('Ext.XTemplate', 
     '<tpl for=".">',   
     '<div role="option" class="x-boundlist-item" style="padding-left: 5px">', 
     '<img src="' + Ext.BLANK_IMAGE_URL + '"class="chkCombo-default-icon chkCombo"/> {name}</div>', 
     '</tpl>' 

},

Sie müssen die überprüft e ungeprüft gif in Ihre Bilder Ordner

Ressourcen erwartet zu arbeiten und Sie benötigen die folgenden css:

.x-boundlist-item img.chkCombo { 
    background: transparent url('../resources/images/unchecked.gif'); 
    width: 15px; 
    height: 15px; 
} 

.x-boundlist-selected img.chkCombo{ 
    background: transparent url('../resources/images/checked.gif'); 
    width: 15px; 
    height: 15px; 
}

Ich hoffe, es hilft.

Editiert: Getestet habe ich nur diese Lösung mit EXTJS 5.1

Quelle

2016-11-14 16:01:57 josei

Danke josei für deine Antwort. Eigentlich hatte ich das gleiche in meiner Combobox (Bild in diesem Problem) und es funktioniert dort, aber in Tagfield in extjs Version 6.0.1 gibt es ein Problem bei der Vorlage Rendering und es funktioniert nicht. In früheren Versionen und auch höheren Versionen funktioniert das gut. Aber ich brauche es in Version 6.0.1 – Gaurav

Sie haben Recht; Ich habe es jetzt mit extjs 6.0.1 getestet und es hat nicht funktioniert – josei

Wie man Kontrollkästchen in extjs Tagfield hinzufügen

Antwort

Verwandte Themen