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ボタンを押してください。 OKを押すと、コンボボックスExt.getCmp('myCombo').getRawValue()の目に見えるテキストと、コンボボックスExt.getCmp('myCombo').valueの項目の値が警告されます。

これをプロジェクトにドロップすると、それがどのように実装されているかを知ることができます。

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