Los valores del cuadro combinado de Extjs 6 y los valores de visualización no se muestran correctamente al configurar valores dinámicamente por fila

1

Uf, ese era un título largo.

En mi proyecto actual tengo una cuadrícula que contiene un conjunto de registros de talleres. Para cada uno de estos talleres hay un conjunto de tarifas que se aplican específicamente al taller en cuestión.

Mi objetivo es mostrar un cuadro combinado para cada fila que muestre las tarifas específicas de ese taller.

Tengo un prototipo que funciona en su mayor parte en sencha violín , pero hay algo extraño en cómo se crean los valores de selección:

Ext.define('Rates',{
    extend: 'Ext.data.Store',
    storeId: 'rates',
    fields: [
        'rateArray'
    ],
    data:[
        {
            workshop: 'test workshop 1',
            rateArray: {
                rate1: {show: "yes", rate: "105", description: "Standard Registration"},
                rate3: {show: "Yes", rate: "125", description: "Non-Member Rate"},
                rate4: {show: "yes", rate: "44", description: "Price for SK tester"}
            }
        },
        {
            workshop: 'test workshop 2',
            rateArray: {
                rate1: {show: "yes", rate: "10", description: "Standard Registration"},
                rate2: {show: "yes", rate: "25", description: "Non-Member Registration"}
            }
        }
    ]
});


Ext.define('MyGrid',{
    extend: 'Ext.grid.Panel',

    title: 'test combo box with unique values per row',

    renderTo: Ext.getBody(),

    columns:[
        {
            xtype: 'gridcolumn',
            text: 'Name',
            dataIndex: 'workshop',
            flex: 1
        },
        {
            xtype: 'widgetcolumn',
            text: 'Price',
            width: 200,
            widget:{
                xtype: 'combo',
                store: [
                    // ['test','worked']
                ]
            },
            onWidgetAttach: function (column, widget, record){
                var selections = [];
                Ext.Object.each(record.get('rateArray'), function (rate, value, obj){
                    var desc = Ext.String.format("${0}: {1}", value.rate, value.description);
                    // according to the docs section on combobox stores that use 2 dimensional arrays
                    // I would think pushing it this way would make the display value of the combobox
                    // the description and the value stored the rate. 
                    selections.push([rate, desc]);
                });
                console.log(selections);
                widget.getStore().add(selections);
            }
        }

    ]
});

Ext.application({
    name : 'Fiddle',

    launch : function() {
        var store = Ext.create('Rates');
        Ext.create('MyGrid',{store: store});
    }
});

En el widget de cuadrícula que estoy usando para el cuadro combinado, estoy usando el método onWidgetAttach para inspeccionar el registro de la fila actual, ensamblar los datos de tasa del registro en una matriz bidimensional y luego configurarlo en la tienda del widget.

Cuando miro la sección de documentos sencha sobre el uso de una matriz bidimensional como tienda , dice:

For a multi-dimensional array, the value in index 0 of each item will be assumed to be the combo valueField, while the value at index 1 is assumed to be the combo displayField.

Dado eso, esperaría que el cuadro combinado muestre la descripción ensamblada (por ejemplo, "$ 150: Registro estándar") y use la clave del objeto como el valor real almacenado (por ejemplo, "tasa1").

Lo que en realidad estoy viendo es que el valor de visualización es la tasa y no estoy seguro de cómo Sencha genera las selecciones del cuadro combinado para ver cómo se representa la selección.

¿Es incorrecta mi suposición sobre cómo la matriz bidimensional se convierte en la tienda?

0

Bueno, tu pregunta sufre el problema XY . Porque lo que realmente quieres hacer es lo siguiente:

Desea crear una tienda decente para su combo, usando un modelo bien definido con los nombres de columna significativos que ya tiene en "rateArray", luego define displayFieldy en valueFieldconsecuencia, y en onWidgetAttach, simplemente inserta el objeto "rateArray" en esa tienda usando setData.

Sth. en la línea de

xtype: 'widgetcolumn',
text: 'Price',
width: 200,
widget:{
    xtype: 'combo',
    store: Ext.create('Ext.data.Store',{
        fields:['rate','description','show']
        filters:[{property:'show',value:"yes"}]
    }),
    displayField:'description',
    valueField:'rate',
    onWidgetAttach: function (column, widget, record){
        widget.getStore().setData(record.get("rateArray"));
    }
},
2
  • 1
    Buen punto, incluso con el snark añadido: /. Gracias. Ayer fue una tarea larga y es mi primer gran proyecto con el framework. La creación de la tienda es definitivamente la forma más fácil / lógica de hacerlo. El nombre rateArray quedó de un refactor que lo convirtió en un objeto. El nombre también se ha actualizado. Gracias. 28/10/15 a las 14:27
  • 1
    Perdón por el sarcasmo; no lo decía en serio. Debería estar mejor ahora. 29/10/2015 a las 7:55