Rendering dei valori suggeriti da un Combobox ext a un elemento nel DOM

Question

Ho una casella combinata ext che utilizza un negozio per suggerire valori a un utente durante la digitazione.

Un esempio del quale potete trovarlo qui: esempio di casella combinata

C'è un modo per renderlo così? elenco di testi suggeriti viene reso su un elemento nel DOM.Tieni presente che non intendo l'opzione di configurazione "applyTo", poiché ciò renderebbe l'intero controllo, inclusa la casella di testo, nell'elemento DOM.

Answer 1

Puoi utilizzare il plugin per questo, poiché puoi chiamare o addirittura sovrascrivere i metodi privati ​​dall'interno del plugin:

var suggested_text_plugin = {

    init: function(o) {

        o.onTypeAhead = function() {
            // Original code from the sources goes here:

            if(this.store.getCount() > 0){
                var r = this.store.getAt(0);
                var newValue = r.data[this.displayField];
                var len = newValue.length;
                var selStart = this.getRawValue().length;
                if(selStart != len){
                    this.setRawValue(newValue);
                    this.selectText(selStart, newValue.length);
                }
            }

         // Your code to display newValue in DOM
         ......myDom.getEl().update(newValue);
        };
    }
};


// in combobox code:

var cb = new Ext.form.ComboBox({
    ....
    plugins: suggested_text_plugin,
    ....
});

Penso che sia anche possibile creare un'intera catena di metodi, chiamando il metodo originale prima o dopo il tuo, ma non l'ho ancora provato.

Inoltre, per favore non spingermi troppo per l'utilizzo di definizioni di plugin e metodi di invocazione non standard (non documentati).E' semplicemente il mio modo di vedere le cose.

MODIFICARE:

Penso che la catena del metodo potrebbe essere implementata in qualcosa del genere (non testato):

....
o.origTypeAhead = new Function(this.onTypeAhead.toSource());
// or just
o.origTypeAhead = this.onTypeAhead;
....

o.onTypeAhead = function() {
    // Call original
    this.origTypeAhead();
    // Display value into your DOM element
    ...myDom....
};

Answer 2

@qui

Un'altra cosa da considerare è che initList non fa parte dell'API.Questo metodo potrebbe scomparire o il comportamento potrebbe cambiare in modo significativo nelle versioni future di Ext.Se non hai mai intenzione di aggiornare, non devi preoccuparti.

Answer 3

Quindi chiarisci che vuoi che il testo selezionato venga visualizzato da qualche parte oltre direttamente sotto l'input di testo.Corretto?

ComboBox è solo un composto di DataView est, un input di testo e un pulsante di attivazione opzionale.Non esiste un'opzione ufficiale per ciò che desideri e hackerarlo per fargli fare ciò che desideri sarebbe davvero doloroso.Quindi, la linea d'azione più semplice (oltre a trovare e utilizzare qualche altra libreria con un componente che fa esattamente quello che desideri) è crearne una tua con i componenti sopra:

1. Crea una casella di testo.Puoi usare un Ext.form.TextField se vuoi, e osserva l'evento keyup.
2. Crea un DataView associato al tuo negozio, eseguendo il rendering su qualsiasi elemento DOM desideri.A seconda di ciò che desideri, ascolta l'evento "selectionchange" e intraprendi qualsiasi azione necessaria in risposta alla selezione.ad esempio, setValue su un Ext.form.Hidden (o un semplice elemento HTML input type="hidden").
3. Nel tuo ascoltatore di eventi keyup, chiama il metodo di filtro del negozio (vedi doc), passando il nome del campo e il valore dal campo di testo.ad esempio, store.filter('nome',new RegEx(valore+'.*'))

È un po' più di lavoro, ma è molto più breve che scrivere il proprio componente da zero o modificare il ComboBox in modo che si comporti come desideri.

Answer 4

@Thevs

Penso che tu fossi sulla strada giusta.

Quello che ho fatto è stato sovrascrivere il metodo initList di Combobox.

    Ext.override(Ext.form.ComboBox, {
    initList : function(){

Se guardi il codice puoi vedere la parte in cui esegue il rendering dell'elenco di suggerimenti in una visualizzazione dati.Quindi imposta semplicemente apply sull'elemento dom che desideri:

            this.view = new Ext.DataView({
            //applyTo: this.innerList,
            applyTo: "contentbox",

Answer 5

@qui

OK.Pensavo che volessi un campo DOM extra (oltre al campo combinato esistente).

Ma la tua soluzione sovrascriverebbe un metodo nella classe ComboBox, non è vero?Ciò porterebbe a tutte le tue caselle combinate che verrebbero visualizzate nello stesso DOM.L'uso di un plugin sovrascriverebbe solo un'istanza particolare.