Question

我正在学习extension.js，试图通过Ajax调用将远程数据加载到sencha组合框中。我看到数据以JSON的形式出现，但没有加载到组合框中。

我正在尝试这样

<script type="text/javascript">        

    // Attach to onDOMReady event
    Ext.onReady(onReady);

    function onReady() {

        // Create store

        var states = new Ext.data.JsonStore({
            proxy: new Ext.data.HttpProxy({
                url: 'AspDropDownControl.aspx/GetCountries', // ASP.NET WebService call in GET format
                headers: {
                    'Content-type': 'application/json' // IMPORTANT! Without this FireFox will not understand WebService response 
                }
            }),
            root: 'd', // Root Json element, always 'd'
            id: 'CountryId', // Identifier column, ExtJS needs it to recognize rows
            fields: ['CountryId', 'CountryName'] // Simple definition of columns
        });

        var combo = new Ext.form.ComboBox({
            xtype: 'combo',
            fieldLabel: "Selecy your Country",
            mode: "remote",
            valueField: "CountryId",
            displayField: "CountryName",
            minChars: 1,
            //allowBlank: false, //to make it required
            anchor: "100%",
            emptyText: "Select an Country...",
            store: states,
            lazyRender: true,
            renderTo: Ext.get('content')
        });
    }
</script>

我能够将JSON响应视为

{"d":[
{"CountryId":1,"CountryName":"Algeria"},
{"CountryId":2,"CountryName":"Benin"},
{"CountryId":3,"CountryName":"Cameroon"},
{"CountryId":4,"CountryName":"Chad"}]}

Answer 1

您有一些错误：

首先：您应该定义一个模型以避免自动模型出现问题。这可能不是你的问题，但它可以被认为是最佳实践。 See the docs

Ext.define('CountryModel',{
   extend: 'Ext.data.Model',
   id: 'CountryId',
   fields: [{name:'CountryId',type:'int'}, 'CountryName'] 
});

使用以下配置行将此模型分配给商店：model:'CountryModel'

第二次：Ext.data.JsonStore是预先配置了代理的Ext.data.Store的简写，用于从ajax请求中读取JSON。但是您正在设置自己的代理，因此将覆盖此设置。简而言之：如果您设置自己的代理，使用Ext.data.JsonStore

时没有任何好处

第三次：定义

root: 'd', 
id: 'CountryId', 
fields: ['CountryId', 'CountryName']

商店级别的

将无效，因为商店没有任何这些配置属性。他们属于读者/模型。但使用模型有一个好处;商店会将模型的一些设置复制到代理/阅读器。

试试此商店：

// don't forget to insert the model definition before you call this
var states = Ext.create('Ext.data.Store', {
    model: 'CountryModel',
    proxy: {
        type: 'ajax',
        url : 'AspDropDownControl.aspx/GetCountries',
        headers: {'Content-type': 'application/json'},
        reader: {
            type: 'json',
            root: 'd'
        }
    }
});

这是完全未经测试的，您可能仍会遇到一些问题，但它应该告诉您如何完成。

请注意，标头只适用于任何请求。他们与阅读无关，可能只会帮助服务器更好了解传入的数据。

Answer 2

我自己并不是在使用JsonStore，但据我所知，“Id”和“root”是Ext.data.reader.Reader

的一部分

（我假设你想要idProperty btw，而不是id，因为它们完全不同）

您的读者应该看起来像这样

reader: {
    type: 'json',
    root: 'd',
    idProperty: 'CountryId'
}

希望这会有所帮助，我并不完全误解某些事情

使用Ajax将数据加载到Sencha ComboBox中

2 个答案: