extjs combo box не привязывается к хранилищу массивов

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": "Привет"}, { "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, он будет предупреждать видимый текст combobox Ext.getCmp('myCombo').getRawValue() и значение элемента в combobox 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 
});