extjs 组合框未绑定到数组存储

Question

使用“ext-designer-for-ext-js-4-users-guide.pdf”中的示例，我将以下内容放在一起。问题是商店没有约束力。即选择是空的。

MyComboBox.js

Ext.define('MyApp.view.MyComboBox', {
    extend: 'MyApp.view.ui.MyComboBox',

    initComponent: function() {
        var me = this;
        me.callParent(arguments);
    }
});

Ext.define('MyApp.view.ui.MyComboBox', {
    extend: 'Ext.form.field.ComboBox',

    fieldLabel: 'comboList',
    displayField: 'comboList',
    queryMode: 'local',
    store: 'MyArrayStore',
    triggerAction: 'all',
    valueField: 'comboList',

    initComponent: function() {
        var me = this;

        me.callParent(arguments);
    }
});

store/MyArrayStore.js

  Ext.define('MyApp.store.MyArrayStore', {
    extend: 'Ext.data.Store',

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            storeId: 'MyArrayStore',
            data: [
                [
                    'Search Engine'
                ],
                [
                    'Online Ad'
                ],
                [
                    'Facebook'
                ]
            ],
            proxy: {
                type: 'ajax',
                reader: {
                    type: 'array'
                }
            },
            fields: [
                {
                    name: 'comboList'
                }
            ]
        }, cfg)]);
    }
});

** 更新**

这让我发疯了。这是[turns out][1] 我的数组需要是json 格式。当我将其更新为

[{"comboList" : "Hello"}, {"comboList" : "Hi"}, {"comboList" : "GoodMorning"}]

成功了。

Answer 1

我开始尝试挑选您的实现，但它似乎有些复杂，从存储本地数据的商店开始和定义了代理但没有代理的 url。

给你一个组合框的简化实现似乎更容易（使用本地数据，因为这似乎是你想要做的）：

// the datastore
var myStore = Ext.create('Ext.data.Store', {
    fields: ['value', 'name'],
    data: [
        {value: 1, name: 'Search Engine'},
        {value: 2, name: 'Online Ad'},
        {value: 3, name: 'Facebook'}
    ]
});    

// a window to hold the combobox inside of a form 
myWindow = Ext.create('Ext.Window', {
    title: 'A Simple Window',
    width: 300,
    constrain: true,
    modal: true,
    layout: 'fit',
    items: [{
        // the form to hold the combobox
        xtype: 'form',
        border: false,
        fieldDefaults: {
            labelWidth: 75
        },
        bodyPadding: '15 10 10 10',
        items: [{
            // the combobox
            xtype: 'combo',
            id: 'myCombo',
            fieldLabel: 'Title',
            valueField: 'value',
            displayField: 'name',
            store: myStore,
            queryMode: 'local',
            typeAhead: true,
            forceSelection: true,
            allowBlank: false,
            anchor: '100%'
        },{
            // shows the selected value when pressed
            xtype: 'button',
            margin: '10 0 0 100',
            text: 'OK',
            handler: function() {
                alert('Name: ' + Ext.getCmp('myCombo').getRawValue() + 
                      '\nValue: ' + Ext.getCmp('myCombo').value);
            }
        }]
    }]
});
// show the window
myWindow.show();   

这会在一个带有确定按钮的小窗口内创建一个组合框。当您按下 OK 时，它会提醒组合框的可见文本 Ext.getCmp('myCombo').getRawValue() 和组合框中项目的值 Ext.getCmp('myCombo').value。

如果你把它放到你的项目中，你可以了解它是如何实现的，它应该只是运行。

如果您真的想要一个远程数据存储（例如来自返回 json 的网络服务），您只需要像这样更改数据存储配置：

var myRemoteStore = Ext.create('Ext.data.Store', {
    fields: ['value', 'name'],
    proxy: {
        type: 'ajax', 
        url: 'myWebservice.php', // whatever your webservice path is
        reader: 'json',
    },
    autoLoad:true  
});