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

然而，我的组合框总是空的，并没有加载这些值。我做错了什么？请帮帮忙！

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类，因此我们获得了一个property：value对。设置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);
}

extjs组合框从控制器加载值

1 个答案: