8
votes

ExtJS Combobox: Masquer la valeur sélectionnée à partir de la liste déroulante

J'utilise ExtJS 4 et à la recherche d'une manière que je peux masquer la valeur actuellement sélectionnée de la liste déroulante de Combo?

donc au lieu de cela ("Alaska" actuellement sélectionné sur ComboBox):

comportement de comboBox par défaut

Je veux que la liste des valeurs ressemble à ceci:

Entrez la description de l'image ici

Dans mon cas, le ComboBox est pas modifiable (c'est-à-dire que vous ne pouvez pas saisir une valeur arbitraire), je ne pense pas qu'il ait beaucoup de sens d'afficher la valeur sélectionnée deux fois: une fois dans la champ de saisie et une fois dans la liste déroulante. Je vois déjà ce qui est sélectionné, je veux que la liste déroulante ne me montre que d'autres options que je peux sélectionner.

Jusqu'à présent, je ne vois pas un moyen facile de le faire. Probablement le meilleur endroit pour commencer est de filtrer le magasin Combobox, mais Combobox utilise ses propres filtres pour la fonctionnalité de recherche en direct.

Quelqu'un considérait ce problème? Est-ce que j'essaie de faire quelque chose de bizarre? Je suis surpris que je n'ai pas pu trouver de sujets connexes.


1 commentaires

Posé la même question sur le forum de Sencha: Sencha.com/forum/...


5 Réponses :


6
votes

Je ne pense pas que vous ayez trop d'options ici ... Peut-être que vous pourriez faire quelque chose comme ceci: xxx

Cet exemple est totalement non testé. Mais comme le magasin est principalement lié à la limite limite qui n'est pas directement liée au champ de texte, cela devrait fonctionner. Vous faites une sorte de mise en cache ici.


3 commentaires

L'idée a l'air bien envers moi mais le code ne fonctionnera pas. ceci.on ("SELECT", fonction () {this.onselectionChange ();}, this); doit être remplacé par this.on ("Sélectionnez", ce. ); pour le faire fonctionner correctement aussi hideactive: faux n'a aucun effet.


Merci pour ce conseil. J'ai supervisé ces choses. Correction est up


Merci, cela semble faire le tour! Édité votre code un peu et maintenant c'est fonctionnel.



4
votes

J'ai proposé une autre solution qui semble encore plus simple et qu'un test rapide ne révèle aucun effet secondaire:

Nous pouvons laisser une logique Combobox intacte, mais simplement masquer l'élément sélectionné via CSS: P>

.x-boundlist-hideactive .x-boundlist-selected {
    display: none;
}


3 commentaires

Je laisserai les réponses inacceptées pour le moment, curieuses de voir si quelqu'un d'autre propose d'autres idées ...


Ceci est totalement à vous de vous :) Mais vous pouvez inaccepter les réponses plus tard sur de toute façon. Que juste comme info


Heh, j'ai oublié ça, merci :) Pour l'instant, j'accepte ma propre réponse parce que c'est ce que j'ai réellement fait dans mon code. J'adorerais que Sencha de faire quelque chose à ce sujet à l'avenir (par exemple, des comboBoxes de macos avec un alignement vertical flottant).



2
votes

J'ai fini par utiliser une version modifiée de la solution de @ SRA: xxx

la logique "cachette" est identique, seulement je l'exécute dans la méthode SETValue Pour vous assurer que cela fonctionne également lors de la réglage de manière programmée de la valeur de Combo, y compris le cas où la combinaison de ComboBox est initialisée avec une valeur.

aussi Aussi, ressemble à store.add (ceci.selectedRecords); doit être appelé avant ceci.callparent (arguments); , sinon Combobox agira bizarre si nous essayons de définir La même valeur deux fois (il ne trouverait tout simplement pas l'enregistrement actif dans le magasin parce que nous l'avons supprimé, il se réinitialisera de sorte que cela se réinitialiser à vide). Je suspends les événements du magasin pour empêcher certaines bizarreries causées par Combobox essayant de se synchroniser avec sa liste déroulante au milieu de mes manipulations avec des enregistrements sélectionnés et de l'événement «Actualiser» de la boutique manuelle de Trigger Stanger. Donc, la liste devient finalement mise à jour. Cela peut avoir un impact sur la performance, mais jusqu'à présent, je ne connais pas une meilleure solution.


0 commentaires

2
votes

extjs 3 j'ai écrit cette réponse en fonction des autres. Fonctionne idéal pour moi, c'est un peu modifié de ce que vous recherchez.

Name.space.name = new Ext.extend(Ext.form.ComboBox, {
    type: 'all',
    oldrec: null,
    store: null,
    constructor: function (config) {
        var me = this;
        if (config.type === 'all') {
            me.store = AllConditionStore;
        } else {
            me.store = ?.?('RuleParameterType');
        }
        config = Ext.apply({
            store: me.store,
            valueField: 'id',
            hideActive: true,
            triggerAction: 'all',
            lazyRender: true,
            allowBlank: false,
            mode: 'local',
            displayField: 'text',
            listeners: {
                select: function (me, recs, index) {
                    if (me.oldrec !== null)
                        me.store.add(me.oldrec);
                    me.oldrec = recs;
                    // remove the selected from the store
                    me.store.remove(recs);
                    // redo store
                }
            }
        }, config);
        ?.?.Parameter.superclass.constructor.call(this, config);
    }
});


0 commentaires

0
votes

Alors j'ai utilisé la solution de @ SRA, mais avec une petite modification, d'ajouter le contenu à la bonne place sous le si (! me.hideactive) code>:

if(me.selectedRecords[0]) {
    me.store.insert(me.selectedRecords[0].index,me.selectedRecords);
}


0 commentaires