Representar valores sugeridos de un cuadro combinado ext a un elemento en el DOM

Question

Tengo un cuadro combinado externo que utiliza una tienda para sugerir valores a un usuario a medida que escribe.

Un ejemplo de lo cual se puede encontrar aquí: ejemplo de cuadro combinado

¿Hay alguna manera de lograr que el lista de textos sugeridos se representa en un elemento en el DOM.Tenga en cuenta que no me refiero a la opción de configuración "applyTo", ya que esto representaría todo el control, incluido el cuadro de texto del elemento DOM.

Answer 1

Puedes usar un complemento para esto, ya que puedes llamar o incluso anular métodos privados desde el complemento:

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,
    ....
});

Creo que incluso es posible crear una cadena completa de métodos, llamando al método original antes o después del tuyo, pero aún no lo he probado.

Además, no me presione demasiado por utilizar métodos de invocación y definición de complementos no estándar (sin documentar).Es simplemente mi forma de ver las cosas.

EDITAR:

Creo que la cadena de métodos podría implementarse de esta manera (no probado):

....
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

Otra cosa a considerar es que initList no forma parte de la API.Ese método podría desaparecer o el comportamiento podría cambiar significativamente en futuras versiones de Ext.Si nunca planeas actualizar, entonces no debes preocuparte.

Answer 3

Entonces, aclare, desea que el texto seleccionado se muestre en algún lugar además de directamente debajo de la entrada de texto.¿Correcto?

ComboBox es solo una combinación de Ext.DataView, una entrada de texto y un botón de activación opcional.No existe una opción oficial para lo que quieres y hackearla para que haga lo que quieres sería realmente doloroso.Entonces, el curso de acción más fácil (aparte de buscar y usar alguna otra biblioteca con un componente que haga exactamente lo que usted desea) es crear la suya propia con los componentes anteriores:

1. Crea un cuadro de texto.Puedes usar un Formulario ext.TextField si lo desea, y observe el evento keyup.
2. Cree un DataView vinculado a su tienda, renderizándolo en cualquier elemento DOM que desee.Dependiendo de lo que desee, escuche el evento 'cambio de selección' y tome las medidas necesarias en respuesta a la selección.por ejemplo, setValue en un Ext.form.Hidden (o elemento de entrada HTML simple = "oculto").
3. En su detector de eventos keyup, llame al método de filtro de la tienda (consulte doc), pasando el nombre del campo y el valor del campo de texto.por ejemplo, store.filter('nombre',nueva expresión regular(valor+'.*'))

Es un poco más de trabajo, pero mucho más corto que escribir su propio componente desde cero o piratear el ComboBox para que se comporte como usted desea.

Answer 4

@Thevs

Creo que estabas en el camino correcto.

Lo que hice fue anular el método initList de Combobox.

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

Si observa el código, puede ver la parte donde muestra la lista de sugerencias para una vista de datos.Así que simplemente configura la aplicación al elemento dom que desees:

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

Answer 5

@qui

De acuerdo.Pensé que querías un campo DOM adicional (además del campo combinado existente).

Pero su solución anularía un método en la clase ComboBox, ¿no es así?Eso llevaría a que todos sus cuadros combinados se representaran en el mismo DOM.El uso de un complemento anularía solo una instancia particular.