El combo ExtJs pierde el valor seleccionado al cargar la página de la tienda

5

Tengo un cuadro combinado ExtJS 4.1 con un JsonStore y queryMode: 'remoto', con paginación y filtrado, como tal:

...
queryMode:      'remote',
allowBlank:     true,
forceSelection: true,
autoSelect:     false,
pageSize:       25,
typeAhead:      true,
minChars:       2,
...

Cuando cargo mi formulario con un valor guardado en este cuadro combinado, cargo la tienda pasando el valor guardado como un parámetro de consulta (filtrado), para asegurarme de que el valor seleccionado está definitivamente dentro de los registros devueltos, y luego configuro ese valor como el valor combinado seleccionado como tal:

    mycombo.getStore().load({
        params: {
            query: displayField
        },
        scope: {
            field: combo,
            valueField: valueField,
            displayField: displayField
        },
        callback: function(records, operation, success) {
            this.field.setValue(this.valueField);
        }
    });

Hasta ahora todo bien, lo anterior funciona bien. El problema es que si el usuario luego hace clic en la flecha desplegable para seleccionar otro valor para el combo, se carga la primera página de la tienda, borrando todos los valores previamente seleccionados, e incluso si no se selecciona nada, se pierde el valor previamente seleccionado. .

Este problema es genérico y es bastante similar a esta pregunta: Combo paginado ExtJS con tienda JSON remota. Muestra el valor seleccionado con paginación y se puede resumir como tal:

En un cuadro combinado ExtJS con un almacenamiento remoto y paginación, los valores seleccionados se pierden cuando cambia la página cargada.

Intenté configurar clearOnPageLoad: falsela tienda, pero luego, cada vez que se carga una nueva página, los registros se agregan al final de la lista. Hubiera esperado que este parámetro almacenara en caché las páginas cargadas y aún me mostrara la página correcta mientras avanzaba y retrocedía.

Entonces, ¿alguna idea sobre cómo mantener el valor seleccionado mientras se mueve entre páginas? Supongo que podría crear un registro con el valor seleccionado manualmente y agregarlo a la tienda en cada carga de página hasta que se seleccione un nuevo valor, pero esto parece demasiado esfuerzo para algo tan básico.

8

Terminamos contactando al soporte de Sencha ya que tenemos una licencia paga. Esta es la respuesta que obtuvimos:


Ext.override(Ext.form.field.ComboBox, {
    onLoad: function() {
        var me = this,
            value = me.value;

        if (me.ignoreSelection > 0) {
            --me.ignoreSelection;
        }

        if (me.rawQuery) {
            me.rawQuery = false;
            me.syncSelection();
            if (me.picker && !me.picker.getSelectionModel().hasSelection()) {
                me.doAutoSelect();
            }
        }

        else {

            if (me.value || me.value === 0) {
                if (me.pageSize === 0) { // added for paging; do not execute on page change
                    me.setValue(me.value);
                }
            } else {


                if (me.store.getCount()) {
                    me.doAutoSelect();
                } else {

                    me.setValue(me.value);
                }
            }
        }
    }
});
2
  • Parece que una limitación de esta implementación es que los campos de valor / visualización son los mismos. En mi aplicación, son diferentes (es decir, identificación y nombre). Creo que será necesario ampliar la interfaz del cuadro combinado para establecer el valor seleccionado y la visualización.
    jacob
    24 de septiembre de 2014 a las 15:33
  • 1
    Ha pasado mucho tiempo desde que publiqué esto y ya no puedo estar seguro ya que tampoco estoy trabajando en esa aplicación ahora, pero no creo que los valores de visualización y campo fueran los mismos. En la mayoría de los casos prácticos, no lo son. 24 sep 2014 a las 20:11
2

Tuvo el mismo problema y 'pruneRemoved: false' no funcionó (parece que solo se usa en cuadrículas). Esta es la solucion:

Ext.override(Ext.form.field.ComboBox,{

    // lastSelection is searched for records
    // (together with store's records which are searched in the parent call)

    findRecord: function(field, value) {
        var foundRec = null;
        Ext.each(this.lastSelection, function(rec) {
            if (rec.get(field) === value) {
                foundRec = rec;
                return false; // stop 'each' loop
            }
        });
        if (foundRec) {
            return foundRec;
        } else {
            return this.callParent(arguments);
        }
    }
});

Espero que no tenga efectos secundarios negativos. Lo he probado un poco y parece estar bien.

1
  • Hola, no estoy seguro de si su solución funcionará, pero publiqué la respuesta oficial del soporte de Sencha a continuación. 1 de febrero de 2013 a las 9:43
0

Estoy experimentando este problema en extjs 6.0.1.

Descubrí una solución alternativa que podría ser útil para otros.

Usé override para onLoad para agregar el registro seleccionado del combo a la tienda antes de llamar a la base onLoad.

Esto funciona porque si el registro seleccionado está en la página que se está viendo, el combo es lo suficientemente inteligente como para no borrar la selección. En otras palabras, la razón por la que la selección se borra mientras navega es porque el registro seleccionado no está en la página que está viendo.

onLoad: function (store, records, success)
{
    var selection = this.getSelection();

    if (selection)
    {
        records.unshift(selection);
        store.insert(0, records);
    }

    this.callParent(arguments);
}
0