0

我有一个 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);
    }

但是我的组合框总是空的并且不加载值。我做错了什么？请帮忙！

4

1 回答 1

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 Controller中，我没有处理加载数组，而是将其更改为具有 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);
}
于 2013-04-26T21:48:41.703 回答