Extjs 6 combobox values and display values not displaying correctly when setting values dynamically per row

Question

Oof that was a long title.

In my current project I have a grid that holds a set of workshop records. For each of these workshops there is a set of rates that apply specifically to the given workshop.

My goal is to display a combobox for each row that shows the rates specific to that work shop.

I've got a prototype that works for the most part up on sencha fiddle, but there's something off about how the selection values are being created:

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

In the grid widget that I'm using for the combobox I'm using the onWidgetAttach method to inspect the current row's record, assemble the rate data from the record into 2 dimensional array, and then setting that to the widget's store.

When I look at the sencha docs section on using a 2 dimensional array as the store, it states:

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.

Given that, I would expect the combo box to show the assembled description (e.g. "$150: Standard Registration") and use the object key as the actual stored value (e.g. "rate1").

What I'm actually seeing is that the display value is the rate and I'm not sure how sencha generates the combobox selections to see how the selection is being rendered out.

Is my assumption about how the 2-dimensionally array gets converted to the store wrong?

Alexander Alexander · Accepted Answer · 2015-10-28T10:49:43

Well, your question is suffering from the XY problem. Because what you really want to do is the following:

You want to create a decent store for your combo, using a well-defined model with the meaningful column names you already have in "rateArray", then you define displayField and valueField accordingly, and in onWidgetAttach, just stuff the "rateArray" object into that store using setData.

Sth. along the lines of

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

Extjs 6 combobox values and display values not displaying correctly when setting values dynamically per row

1 Answers