extjs 콤보 상자가 배열 저장소에 바인딩되지 않음

Question

"ext-designer-for-ext-js-4-users-guide.pdf"의 예제를 사용하여 다음을 작성했습니다. 문제는 상점이 구속력이 없다는 것입니다. 즉, select는 비어 있습니다.

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 형식이어야합니다. 내가

에 업데이트 할 때 [{ "콤보 목록": "안녕하세요"}, { "콤보 목록": "안녕"}, { "콤보 목록": "굿모닝는"}]

일했다.

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의 항목 값을 경고합니다.

프로젝트에 이것을 놓으면 구현 방법에 대한 아이디어를 얻을 수 있습니다. 그냥 실행해야합니다.

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