ExtJs 4 combobox avec des cases à cocher

Je suis à la recherche d'EXTJS4 contrôle zone de liste déroulante qui permet la sélection de plusieurs éléments via des cases à cocher à l'intérieur.

En fait j'ai besoin de ce contrôle http://lovcombo.extjs.eu/ mais il est mis en œuvre pour ExtJs3. J'ai essayé de le convertir en ExtJs4 mais la tâche n'est pas triviale réalité.

Pourriez-vous suggérer des composants similaires pour ExtJs4. Ou peut-être vous pourriez m'indiquer un tutoriel ou un exemple - comment faire de telles choses?

OriginalL'auteur Andrey Selitsky | 2011-07-06

  1. 17

    Multiselect combo avec case à cocher dans ExtJS4.0 peut être réalisé avec l'ajout de quelques lignes de code.

    Fondamentalement, vous avez besoin de faire usage de l'existant classe css qui appliquée lors de la sélection et désélection d'un objet et en le poussant d'une image (la case de l'image) à l'époque en conséquence.

    "x-boundlist-élément" et "x-boundlist-sélectionné" sont les classes de prise de poste-tous.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>';
            }
        }
    });

    [ci-dessous est une image de ce composant personnalisé]

    ExtJs 4 combobox avec des cases à cocher

    Je suis en v4.2.1.883 (je ne sais pas si c'est important) mais le code ci-dessus n'a pas fonctionné jusqu'à ce que j'ai ajouté une hauteur et une largeur de 16px à chacun des styles ci-dessus. J'ai aussi déplacé de l'image vers mon répertoire /Images (je ne sais pas si ce qui compte). Je suis vraiment demandais ce qui allait être une meilleure façon de le faire, de sorte que vous n'avez pas de code de référence de la extjs chemin d'accès aux ressources?
    Dans ExtJS 4.2.1 (et autres versions sans doute), vous n'avez pas à coder en dur le chemin d'accès aux ressources. Au lieu de cela, mettre les styles pour un fichier SCSS (ex. sass/etc/toutes.scss) et l'utilisation "background: transparent url(images/menu/checked.gif);". Il semble qu'en 4.2.1, nous avons explicitement donner une largeur et une hauteur de 16px comme Pierre l'a mentionné.
    dit, Vous devez ajouter de la hauteur et la largeur de 16px à votre style. Il a travaillé chez moi sur extjs 4.2.2.

    OriginalL'auteur Subrata Nath

  2. 7
    1. utiliser ceci: http://www.sencha.com/forum/showthread.php?134751-Ext.ux.form.field.BoxSelect-Intuitive-Multi-Select-ComboBox

    ExtJs 4 combobox avec des cases à cocher

    1. ou ceci: http://www.sencha.com/forum/showthread.php?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList

    -- utilisation de la grille avec checkboxselectmodel dans la combox

    J'ai vu ce composant, et je pense qu'il est grand. Mais j'ai besoin exactement combobox avec des cases à cocher. C'est une exigence. Merci quand même.
    essayez de la deuxième manière. ou attendre un moment, il y aura quelqu'un pour déplacer lovcombo à 4.x 🙂

    OriginalL'auteur atian25