Ajax數據無法在組合框中加載

我在extjs應用程序中使用了組合框組件。我想通過json加載列表。但是當我點擊組合框時，列表不顯示。請幫助我。Ajax數據無法在組合框中加載

以下是Ajax調用：

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

以下是部分：

{ 
      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：

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

來源

2012-07-23 Hemant

你應該通過商店做加載。下面是我的一箇舊的應用程序的例子：

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"}]}

來源

2012-07-23 14:41:34 Derek

謝謝，但我使用json來調用列表項，而不是php。如果你可以在MVC結構中提供詳細的答案，這將是非常好的。我使用Extjs4 – Hemant 2012-07-24 05:39:35

我想你只需要改變代理連接。將代理網址更改爲「data/vgroup.json」，並將根目錄更改爲「vgroup」。 – Derek 2012-07-24 13:00:35

@Hemant PHP不是一種數據交換格式，而是一種服務器端編程語言，除了其他語言之外，它還可以生成JSON（http://php.net/manual/en/function.json-encode.php）。無論您是從JSON文件還是從PHP生成的「JSON文件」加載數據都無關緊要。 – Alexander 2016-06-17 07:28:04

可能是你應該首先檢查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"); 
          } 
         });

問候。

來源

2016-06-17 07:21:45

您的問題主要是您正在進行一個Ajax調用，它是異步，並在其中創建一個NEW商店，該商店被設置爲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);

來源

2016-06-17 07:36:57 Alexander

Ajax數據無法在組合框中加載

回答

相關問題