Extjs 6 組合框值和顯示值在每行動態設置值時無法正確顯示

Question

哦，那是一個很長的標題。

在我當前的項目中，我有一個包含一組研討會記錄的網格。 對於這些研討會中的每一個，都有一組專門適用於給定研討會的費率。

我的目標是為每一行顯示一個組合框，顯示特定於該工作車間的費率。

我有一個原型，大部分都在 sencha fiddle 上工作，但是關於如何創建選擇值有一些問題：

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

在我用於組合框的網格小部件中，我使用 onWidgetAttach 方法檢查當前行的記錄，將記錄中的速率數據組合成二維數組，然后將其設置到小部件的商店。

當我查看使用二維數組作為 store的 sencha docs 部分時，它指出：

對於多維數組，每個項目的索引 0 中的值將被假定為組合 valueField，而索引 1 處的值將被假定為組合 displayField。

鑒於此，我希望組合框顯示組合的描述（例如“$150：標准注冊”）並使用對象鍵作為實際存儲的值（例如“rate1”）。

我實際看到的是顯示值是速率，我不確定 sencha 如何生成組合框選擇以查看選擇是如何呈現的。

我關於二維數組如何轉換為商店的假設是錯誤的嗎？

Answer 1

好吧，您的問題是XY 問題。 因為你真正想做的是以下幾點：

你想為你的組合創建一個像樣的商店，使用一個定義良好的模型，你已經在“rateArray”中擁有有意義的列名，然后相應地定義displayField和valueField ，在onWidgetAttach ，只需將“rateArray”對象填充到該存儲使用setData 。

…… 沿着

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