extjs combobox從控制器加載值

Question

我有一個ext js組合框，我從我的控制器加載的值。以下是代碼：

<script type="text/javascript"> 

    Ext.onReady(function() { 
    var combo = Ext.data.Record.create([ 

     { 
      name: 'Name', 
      type: 'string' 
     } 
    ]); 

    var writer = new Ext.data.JsonWriter({ 
     encode: false, 
     listful: true, 
     writeAllFields: true 
    }); 

    var reader = new Ext.data.JsonReader({ 
     totalProperty: 'total', 
     successProperty: 'success', 
     idProperty: 'Name', 
     root: 'data', 
     messageProperty: 'message' // <-- New "messageProperty" meta-data 
    }, combo); 


    var proxy = new Ext.data.HttpProxy({ 
     api: { 
      read: '/ComboBox/Load' 

     }, 
     headers: { 'Content-Type': 'application/json; charset=UTF-8' } 
    }); 

    var store = new Ext.data.Store({ 
     id: 'Name', 
     proxy: proxy, 

     reader: reader, 
     writer: writer, // <-- plug a DataWriter into the store just as you would a Reader 
     autoSave: false // <-- false would delay executing create, update, destroy requests until specifically told to do so with some [save] buton. 

    }); 

    store.load(); 


    Ext.data.DataProxy.addListener('exception', function (proxy, type, action, options, res) { 
     Ext.Msg.show({ 
      title: 'ERROR', 
      msg: res.message, 
      icon: Ext.MessageBox.ERROR, 
      buttons: Ext.Msg.OK 
     }); 
    }); 

    var editor = new Ext.ux.grid.RowEditor({ 
     saveText: 'Update' 
    }); 

    var numberField = new Ext.form.ComboBox({ 
     fieldLabel: 'Name', 
     hiddenName: 'Name', 
     store:store, 
     displayField: 'Name', 
     typeAhead: true, 
     mode: 'local', 
     triggerAction: 'all', 
     emptyText: 'Choose number...', 
     selectOnFocus: true, 
     pageSize: 50, 
     labelWidth: 50, 
     width: 300, 
     padding: '60 0 0 0', 
     renderTo: Ext.getBody() 
    }); 
}) 

在我的控制器我有一個負載功能

public JsonResult Load() 
    { 
     List<string> my_values = new List<string>(); 
     my_values.Add("aaaa"); 
     my_values.Add("bbbb"); 
     my_values.Add("cccc"); 
     my_values.Add("dddd"); 
     my_values.Add("eeee"); 
     return Json(new 
     { 
      total = my_values.Count, 
      data = my_values, 
     }, JsonRequestBehavior.AllowGet); 
    } 

但是我的組合框始終是空的，不加載values.What我做錯了什麼？請幫忙！

Answer 1

您的代碼存在一系列問題，您可以通過Firebug或Chrome開發工具看到。第一個是Ext.data.Record.create是給下面的錯誤：

Uncaught TypeError: Cannot read property 'items' of undefined 

一些Ext.js教程有提到Ext.data.Record.create方式（包括文檔），但有一個更更簡單的方式來設置整個事情。我只會專注於閱讀/加載部分。

在JavaScript：，我改變了一些事情，以匹配Ext.JS調整設定了4個方法：

Ext.onReady(function() { 
     Ext.define('combo', { 
      extend: 'Ext.data.Model', 
      fields: [ 
       { name: 'Name', type: 'string' } 
      ] 
     }); 

     var store = Ext.create('Ext.data.Store', { 
      model: 'combo', 
      proxy: { 
       type: 'ajax', 
       url: '/Combo/Load', 
       reader: { 
        type: 'json', 
        root: 'data', 
        totalProperty: 'total' 
       } 
      }, 
      autoLoad: true 
     }); 

     var numberField = new Ext.form.field.ComboBox({ 
      fieldLabel: 'Name', 
      store: store, 
      displayField: 'Name', 
      typeAhead: true, 
      queryMode: 'local', 
      displayField: 'Name', 
      valueField: 'Name', 
      triggerAction: 'all', 
      emptyText: 'Choose number...', 
      selectOnFocus: true, 
      pageSize: 50, 
      labelWidth: 50, 
      width: 300, 
      padding: '60 0 0 0', 
      renderTo: Ext.getBody() 
    });  
}); 

現在您就可以在其他地區重新使用，以及您的代理模型和讀者簡化。

，而不是處理加載陣列

在MVC控制器，我改變了它有DTO類，所以我們得到一個屬性：值對。設置Ext.JS閱讀器來映射json數據對象比單個字符串數組要容易得多。此外，這種方式將幫助您擴展以處理大多數選擇字段將具有的名稱/值對。

public class Combo 
{ 
    public string Name { get; set; } 
    public Combo(string name) 
    { 
     Name = name; 
    } 
} 

public JsonResult Load() 
{ 
    List<Combo> my_values = new List<Combo>(); 
    my_values.Add(new Combo("aaaa")); 
    my_values.Add(new Combo("bbbb")); 
    my_values.Add(new Combo("cccc")); 
    my_values.Add(new Combo("dddd")); 
    my_values.Add(new Combo("eeee")); 

    return Json(new 
    { 
     total = my_values.Count, 
     data = my_values, 
    }, JsonRequestBehavior.AllowGet); 
}