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

存储/ 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

我开始试图挑选你的实现，但它似乎有点复杂，从存储本地数据和代理定义但没有代理网址的商店开始。

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

// 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的Web服务），您只需要更改数据存储配置：

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

extjs组合框没有绑定到数组存储

1 个答案: