ExtJs 4: combobox mit Checkboxen

Ich bin auf der Suche nach EXTJS4 combobox-Steuerelement, das ermöglicht die Auswahl mehrerer Elemente über die Checkboxen im inneren.

Eigentlich brauche ich diese Kontrolle http://lovcombo.extjs.eu/ aber implementiert ist es für ExtJs3. Ich habe versucht, es zu konvertieren, um ExtJs4, aber die Aufgabe ist nicht trivial eigentlich.

Könnten Sie vorschlagen, eine ähnliche Komponente für ExtJs4. Oder vielleicht könnten Sie mir einige tutorial oder ein Beispiel, wie solche Dinge zu tun?

InformationsquelleAutor Andrey Selitsky | 2011-07-06

17

Multiselect Kombinationsfeld mit checkbox in ExtJS4.0 erreicht werden kann mit neben paar Zeilen code.

Grundsätzlich müssen Sie die vorhandene css-Klasse, die angewendet werden bei der Auswahl und Abwahl von ein Element aus, und drücken Sie ein Bild (checkbox Bild) zu dieser Zeit entsprechend.

"x-boundlist-Element" und "x-boundlist-ausgewählte" sind die Klassen genommen von ext-all.css.
```
<style>
```
```
.x-boundlist-item img.chkCombo {
    background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/unchecked.gif);
}
.x-boundlist-selected img.chkCombo{
    background: transparent url(/lib/extjs-4.1.0/resources/themes/images/default/menu/checked.gif);
}
```
```
</style>
<head>
```
```
Ext.create('Ext.form.ComboBox', {
        id: 'BCCAddress',
        name: 'BCCAddress',
        maxHeight: 150,        
        width: 210,
        multiSelect: true,
        emptyText : "Select Bcc email addresses",
        renderTo: 'extBCCAddress',
        store: myArrayStore,
        displayField: 'fieldName',
        valueField: 'fieldName',
        forceSelection: true,
        editable: false,
        mode: 'local',
        triggerAction: 'all',
        listConfig : {          
            getInnerTpl : function() {
                return '<div class="x-combo-list-item"><img src="' + Ext.BLANK_IMAGE_URL + '" class="chkCombo-default-icon chkCombo" /> {fieldName} </div>';
            }
        }
    });
```
[unten ist ein Bild von diesem benutzerdefinierten Komponente]
- Ich bin mit der v4.2.1.883 (nicht sicher, wenn es darauf ankommt), aber der obige code nicht funktioniert hat, bis ich fügte hinzu, eine Höhe und Breite von 16px auf jeden der Stile vor. Ich zog auch das Bild zu meinem /Bilder-Verzeichnis (nicht sicher, ob das wichtig). Ich bin wirklich Fragen, was wäre ein besserer Weg, dies zu tun, so dass Sie nicht haben, um hart-code Referenz auf die extjs-Ressource-Pfad?
- In ExtJS 4.2.1 (und andere Versionen wohl), Sie müssen nicht zu hart code, der die Ressource Weg. Stattdessen setzen die Stile auf eine SCSS-Datei (ex. sass/etc/all.scss) und mit "background: transparent url(images/menu/checked.gif);". Es scheint, dass in 4.2.1, wir haben explizit geben eine Breite und eine Höhe von 16px, wie Peter erwähnt.
- sagt, Sie haben zum hinzufügen von height und width von 16px zu Ihrem Stil. Es funktionierte bei mir auf extjs 4.2.2.
InformationsquelleAutor Subrata Nath
7
1. verwenden: http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox
1. oder so: http://www.sencha.com/forum/showthread.php?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList
-- use-raster mit checkboxselectmodel in combox
- Ich sah diese Komponente, und ich denke, es ist großartig. Aber ich brauche genau combobox mit Checkboxen. Es ist eine Voraussetzung. Trotzdem danke.
- versuchen Sie den zweiten Weg. oder warten Sie einen moment, wird es jemand verschieben lovcombo zu 4.x 🙂
InformationsquelleAutor atian25

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.