Ajax 데이터가 콤보 상자에로드되지 않습니다

Question

extjs 응용 프로그램에 콤보 상자 구성 요소를 사용하고 있습니다. json을 통해 목록을로드하고 싶습니다. 하지만 콤보 상자를 클릭하면 목록이 표시되지 않습니다. 이걸 도와주세요. 다음

이

아약스 호출입니다 :

Ext.Ajax.request({ 
          url: 'data/vgroup.json', 
          method: 'Get', 
          timeout: 9000, 
          success: function(response, opts) { 
           var device = Ext.decode(response.responseText); 
           var device_records = new Array(); 

           for(var itr=0; itr < device.vgroup.length; itr++) { 
            var record = new Array(); 
            record[0] = device.vgroup[itr].name; 
            //alert(device.vgroup[itr].name); 
            device_records[itr] = record; 
           } 

           vgfrmextension_device = new Ext.data.ArrayStore({ 
            fields: ['name'], 
            data : device_records 
           }); 
          }, 
          failure: function(response, opts) { 
           Ext.MessageBox.alert('Failure', "Link not found"); 
          } 
         }); 

다음은 구성 요소입니다

{ 
    vgroup: [ 
     { 
      'id': 'team1', 
      'name': '100G', 
      'size': '5646546546', 
      'available': '545644541', 
      'player': 'avi', 
      'status': 'Good' 
     }, 

Answer 1

당신은 저장소를 통해 로딩을 수행해야합니다 여기

{ 
      xtype:'combobox', 
      fieldLabel: 'Team name* ', 
      editable:false, 
      /*allowBlank: false,*/ 
      store: vgfrmextension_device, 
      valueField:'name', 
      displayField:'name', 
      name: 'txtMode', 
      id:'txtModeId', 
      queryMode: 'local', 
      triggerAction: 'all', 
      emptyText:'Select Mode',  
      listeners: { 

      } 
     }, 

은 JSON이다. 여기

FC.Global.Toolbar = [{ 
    xtype: 'combo', 
    store: new Ext.data.JsonStore({ 
     proxy: new Ext.data.HttpProxy(new Ext.data.Connection({ 
      url: 'comboboxlist.php' 
     })), 
     root: 'items', 
     fields: ['name'] 
    }), 
    displayField: 'name', 
    valueField: 'name', 
    mode: 'local', 
    triggerAction: 'all', 
    typeAhead: true, 
    minChars: 1, 
    id: 'widgetloadcombobox', 
    listeners: {render: function(e) {this.getStore().load();}} 
},{ 
    // Other toolbar items 
}] 

그리고을에서 httpProxy 호출에 의해 반환 된 JSON은 (단 하나의 항목을 가지고있는)과 같은 기능 : : 여기에 내 이전 응용 프로그램의 예입니다

는

{"items":[{"name":"Generator"}]} 

Answer 2

당신이해야 먼저 확인 할 수있다 device_records 배열. 이 작동하는 경우

Ext.Ajax.request({ 
          url: 'data/vgroup.json', 
          method: 'Get', 
          timeout: 9000, 
          success: function(response, opts) { 
           var device = Ext.decode(response.responseText); 
           var device_records = [ 
             {"name":"John"}, 
             {"name":"Anna"}, 
             {"name":"Peter"} 
           ]; 
           vgfrmextension_device = new Ext.data.ArrayStore({ 
            fields: ['name'], 
            data : device_records 
           }); 
          }, 
          failure: function(response, opts) { 
           Ext.MessageBox.alert('Failure', "Link not found"); 
          } 
         }); 

,이 같은 충진 전략을 변경할 수 있습니다

Ext.Ajax.request({ 
          url: 'data/vgroup.json', 
          method: 'Get', 
          timeout: 9000, 
          success: function(response, opts) { 
           var device = Ext.decode(response.responseText); 
           var device_records = []; 

           for(var itr=0; itr < device.vgroup.length; itr++) { 
            device_records.push(
               { 
               "name": device.vgroup[itr].name 
              }); 
           } 

           vgfrmextension_device = new Ext.data.ArrayStore({ 
            fields: ['name'], 
            data : device_records 
           }); 
          }, 
          failure: function(response, opts) { 
           Ext.MessageBox.alert('Failure', "Link not found"); 
          } 
         }); 

안부.

Answer 3

문제는 주로 비동기 인 Ajax 호출을 작성하고 vgfrmextension_device 변수로 설정된 새 저장소를 작성하는 것입니다.

그리고 당신은 콤보 상자의 저장소로 같은 변수를 사용하는 것이 -하지만 비동기 호출이 완료되기 전에. 이렇게 효과적으로 콤보 박스에 말하십시오. 당신의 가게는 undefined입니다, 그리고 당신은 가게를 만들지 만, 그 가게는 결코 콤보 박스에 연결되지 않습니다.

당신은 구성 요소를 만들기 전에 반드시 ArrayStore을 만들고 전에 요청을 시작하고,이 반환 될 때 기존의 저장소로 데이터를로드해야합니다

var vgfrmextension_device = new Ext.data.ArrayStore({ 
    fields: ['name'] 
}); 
Ext.Ajax.request({ 
    url: 'data/vgroup.json', 
    method: 'Get', 
    timeout: 9000, 
    success: function(response, opts) { 
     var device = Ext.decode(response.responseText); 
     var device_records = new Array(); 
     for(var itr=0; itr < device.vgroup.length; itr++) { 
      var record = new Array(); 
      record[0] = device.vgroup[itr].name; 
      //alert(device.vgroup[itr].name); 
      device_records[itr] = record; 
     } 
     vgfrmextension_device.setData(device_records); 

또는, 당신이 가게를 첨부 할 수 있습니다 success의 콤보 상자에

vgfrmextension_device = new Ext.data.ArrayStore({ 
    fields: ['name'], 
    data : device_records 
}); 
Ext.getCmp("widgetloadcombobox").setStore(vgfrmextension_device);