Model view controller extjs组合框从控制器加载值

我有一个ExtJS组合框，我正在从我的控制器加载它的值。代码如下：

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

Ext.onReady（函数（）{
var combo=Ext.data.Record.create([
{
姓名：'姓名'，
键入：“字符串”
}
]);
var writer=new Ext.data.JsonWriter({
编码：false，
没精打采的：是的，
writeAllFields:对
});
var reader=new Ext.data.JsonReader({
totalProperty:'total'，
successProperty:“成功”，
idProperty:“名称”，
root:'数据'，
messageProperty:'message'/通过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);
}

公共类组合
{
公共字符串名称{get；set；}
公共组合（字符串名称）
{
名称=名称；
}
}
公共JsonResult加载（）
{
列出我的_值=新列表（）；
添加（新组合（“aaaa”）；
添加（新组合（“bbbb”）；
添加（新组合（“cccc”）；
添加（新组合（“dddd”）；
添加（新组合（“eeee”）；
返回Json（新的
{
总计=我的值。计数，
数据=我的_值，
}，JsonRequestBehavior.AllowGet）；
}
使用此代码时，我得到了一个没有任何组合框的空白页。请尝试url:“/combobox/Load”而不是上面的/Combo/Load。很抱歉，我在测试时使用了不同的名称设置了我的测试控制器。好的，我在尝试之前已经修改了该名称……但是，当我按照u的建议将列表结构更改为object时，我的代码使用了上一个aspx。现在我可以看到combobox中的值。。现在我想获取所选值并将其传递给我的控制器。我如何做。我已尝试将侦听器添加到combo。。但不确定如何将值传递给控制器。侦听器：{select:函数（combo，record，index）{var value=combo.getValue（）；alert（value+'clicked'）；}这取决于通过常规表单post（可能带有提交按钮）将值发送到服务器的方式，然后您可以使用Ext.form.field.ComboBox（或任何Ext.form.field组件）中的“name”设置，在表单发布时为ComboBox设置表单键的名称。如果您是通过Ajax执行此操作的，那么您已经知道如何通过combo.getValue（）获取值，因此可以将其用于
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);
}