Question

嗨我有一个带有数组值的json，我想将这些值设置为selectfield的选项。不确定如何继续这个场景。感谢任何帮助。

下面是我的json和javascript函数的代码，它返回xtype selectfeild

          var json= {
                "metric": {
                    "areaInput": ["um", "mm", "cm", "m", "dm", "km"],
                    "areaResult": ["um", "mm", "cm", "m", "ha", "dm", "km"],
                    "volumeInput": ["mm", "cm", "m", "km"],
                    "volumeResult": ["ml", "tsp", "tbs", "l", "mm", "cm", "m", "km"],
                    "weight": ["g", "kg", "mg", "t"]
},
      "imperial": {
            "areaInput": ["in", "ft", "yd", "fur", "mi", "nmi"],
            "areaResult": ["in", "ft", "yd", "mi", "nmi", "acre"],
            "volumeInput": ["in", "ft", "yd", "mi"],
            "volumeResult": ["in", "oz", "fl.oz", "pt", "qt", "gal", "tbs", "tsp", "cups", "ft", "yd", "mi"],
            "weight": ["oz", "lb", "t", "oz.tr.", "grains"]
        }
                },


            selectBoxUnit: function(eachInput){
                   var options = [];


        for (h in json.metric) {
          options.push({text: json.metric[h], value: h});
        }
            Ext.getCmp('myselect').add(options);
                    return {
                        xtype: 'selectfield', 
                        usePicker : false,
                        itemId: eachInput.itemId+"selectfield",
                        name: eachInput.itemId,
                        id:'myselect',
                        flex: 1,
                        options: options, 
                        listeners: {
                            change: function (field, value) {
                                    field.setOptions([{
                                        value: "newvalue",
                                        text: "My new value"
                                    }], true);
                                }
                            }
                        }

                    };

Answer 1

我对Sencha Touch 2很新。我为你写了这个例子。可能它会帮助你。您必须将数据存储设置为 selectfield。在此之后，您可以非常轻松地向此添加项目将创建数据存储区和选项。

Ext.define('OptionModel', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'text', type: 'string'},
            {name: 'value', type: 'string'}
        ]
    }
});

var optionsStore = Ext.create('Ext.data.Store', {
    model: 'OptionModel'
});

Ext.application({
    name: 'Test',

    launch: function () {
        Ext.Viewport.add({
            xtype: 'panel',
            fullscreen: true,
            items: [
                {
                    xtype: 'fieldset',
                    title: 'Select',
                    items: [
                        {
                            xtype: 'selectfield',
                            label: 'Choose item',
                            id: 'selectItemId',
                            store: optionsStore
                        }
                    ]
                },
                {
                    xtype: 'button',
                    text: 'Add new item',
                    listeners: {
                        tap: function () {
                            var optionValueText = "Item " + optionsStore.getCount();

                            // here is the magic 
                            optionsStore.add({
                                text: optionValueText,
                                value: 'somevalue'
                            });

                            // here we set new added item
                            // to be selected (active into select)
                            Ext.ComponentQuery.query('#selectItemId')[0].setValue(optionValueText);
                        }
                    }
                }
            ]
        });
    }
});

Selecfield从数组中设置选项

1 个答案: