在Extjs 4的商店上加载监听器不起作用

时间:2012-02-10 07:07:13

标签: extjs extjs4 listener store

我在Extjs 4中寻找类似“加载”商店的监听器,但我遇到了一些问题。

1)我的印象是'load'监听器方法的'success'参数告诉我们操作是否成功,但'success'参数包含一个数组。我不知道该数组包含什么,但在调用'success.length'属性后,我发现它包含我的服务器端代码作为响应发送的实际行数。所以我认为'成功'属性实际上包含我的数据,但我不确定。

2)如果我对'records'或'success'参数使用Ext.each()方法,我无法看到加载的实际数据。如何查看实际数据?

商店代码如下所示:

Ext.define('myCompany.store.customerDistribution', {
    extend: 'Ext.data.TreeStore',
    autoLoad: true,

    proxy: {
        type: 'ajax',
        url: 'data/customerDistribution/customerCount.json',
        reader: {
            type: 'array',
            root: 'resultset'
        }
    },
    listeners: {
        load: function(store, records, success) {
            /*console.log('store - ' + store +
                        ', typeof(store) - ' + typeof(store) +
                        ', records - ' + records +
                        ', records data - ' + records.data +
                        ', success - ' + success +
                        ', type of success - ' + typeof(success)+
                        ', success length - ' + success.length);
            if(records == true) {
                console.log('records is data property...');
            }
            if(store == true) {
                console.log('store is a data property...');
            }
            for(r in records) {
                console.log(r + '\ttypeof(r) -> ' + typeof(r));
            } */
            if(success && records.length > 0) {
                var allCountries = [];
                var previousCountry = undefined;

                var countryIndex = 0;
                var stateIndex = 1;
                var cityIndex = 2;
                var customerCountIndex = 3;

                Ext.each(records, function(record, index){
                    console.log('record - ' + record[0] + ', ' + record[1]);
                });
            }
        }
    }
});

我正在尝试将基于行的json转换为层次结构json以在树面板中显示。这就是我使用load listner的原因。 我的Json看起来如下:

{
    "queryInfo":{"totalRows":"100"},

    "resultset":[
        ["India","India","India",63],
        ["India",""," Tirupati ",1],
        ["India",""," UTTARPARA ",1],
        ["India","Andhra Pradesh",null,61],
        ["India","Andhra Pradesh"," Chittoor ",1],
        ["India","Andhra Pradesh"," Guntur ",2],
        ["India","Andhra Pradesh"," Hyderabad ",58]
      ],
    "metadata":[
        {"colIndex":0,"colType":"String","colName":"Country"},
        {"colIndex":1,"colType":"String","colName":"State"},
        {"colIndex":2,"colType":"String","colName":"City"},
        {"colIndex":3,"colType":"Integer","colName":"customer_count"}
    ]
}

我希望将其转换为:

"resultset": [
    countries: [
    {
        name: "India",
        customer_count: 63
        states: [
            {
                name: "Andhra Pradesh",
                customer_count: 61,
                cities: [
                    {
                        name: "Tirupati",
                        customer_count: 1
                    },
                    {
                        name: "UTTARPARA",
                        customer_count: 1
                    },
                    {
                        name: "Chittoor",
                        customer_count: 1
                    },

                    {
                        name: "Guntur",
                        customer_count: 2
                    },
                    {
                        name: "Hydrabad",
                        customer_count: 58
                    }
                ]
            }
        ]
    }
]

请帮助!!

1 个答案:

答案 0 :(得分:7)

您选择了错误的加载事件签名。在TreeStore中,它具有以下签名load( Ext.data.TreeStore this, Ext.data.NodeInterface node, Ext.data.Model[] records, Boolean successful, Object eOpts )。此外,记录以树结构排列,因此您无法使用each迭代它们。

以下是将树中的每条记录记录到控制台的示例代码:

var store = Ext.create('Ext.data.TreeStore', {
    model: 'Task',
    proxy: {
        type: 'ajax',
        url: 'treegrid.json'
    },

    logRecord: function(r, depth) {
        if (!depth) { depth = ''; }
        console.log(depth + Ext.encode(r.data));

        Ext.each(r.childNodes, function(record, index){
            this.logRecord(record, depth + '    ');
        }, this);
    },

    listeners: {
        load: function(sender, node, records) {
            Ext.each(records, function(record, index){
                this.logRecord(record);
            }, this);
        }
    }
});