在每行动态设置值时,Extjs 6个组合框值和显示值无法正确显示

时间:2015-10-27 15:49:21

标签: javascript extjs combobox

这是一个很长的头衔。

在我目前的项目中,我有一个网格,其中包含一组研讨会记录。对于每个研讨会,都有一套专门适用于特定研讨会的费率。

我的目标是为每一行显示一个组合框,显示特定于该工作车间的费率。

我有a prototype that works for the most part up on 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方法检查当前行的记录,将记录中的费率数据组合成二维数组,然后将其设置为小部件的存储。

当我查看using a 2 dimensional array as the store上的sencha文档部分时,它指出:

  

对于多维数组,每个项目的索引0中的值将被假定为组合valueField,而索引1处的值将被假定为组合displayField。

鉴于此,我希望组合框能够显示已组合的描述(例如 “150美元:标准注册”)并使用对象密钥作为实际存储值(例如“rate1”)。

我实际看到的是显示值是速率,我不确定sencha如何生成组合框选择以查看如何渲染选择。

我是否假设二维数组如何转换为存储错误?

1 个答案:

答案 0 :(得分:-1)

好吧,你的问题正在受到XY problem的影响。因为你真正想做的是以下几点:

你想为你的组合创建一个像样的商店,使用定义良好的模型,你已经在" rateArray"中定义了有意义的列名,然后定义displayField和{{1因此,在valueField中,只需填充" rateArray"使用onWidgetAttach对象进入该商店。

STH。

setData