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

店/ 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”： “你好”}，{ “comboList”： “嗨”}，{ “comboList”： “早安”}]

它的工作。

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