Question

如何使用ajax response.ajax响应在extjs .d中加载内存中的数据，给出json数据。当我尝试加载到分页网格时，它不会显示任何内容。可以任何一个你想法。对我充满帮助

var itemsPerPage = 10;   // set the number of items you want per page

//  i am creating a store to load data into memory    
var store = Ext.create('Ext.data.Store', {    
    autoLoad: true,
    fields:['id','name', 'email'],
    pageSize: itemsPerPage, // items per page
    proxy: {
        type:'memory',
        enablePaging: true,
        reader: {
            type: 'json',
            root: 'users',
            successProperty: 'success'
         }
    }         
});

// i am creating a ajax request to get json data
Ext.Ajax.request({
    url: 'app/data/users.json',     
    success: function(resp) {            
       var result = resp.responseText;
       store.loadRawData(result);
    },        
});

// to view data in store 
Ext.define('AM.view.user.list' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    title: 'All Users',
    initComponent: function() {
        Ext.create('Ext.grid.Panel', {
            title: 'My Test Demo',
            store:store,
            columns: [
                { header: 'ID',  dataIndex: 'id' }, 
                { header: 'Name',  dataIndex: 'name' },
                { header: 'Email', dataIndex: 'email', flex: 1 }
              ],
            width: 350,
            height: 280,
            dockedItems: [{
                xtype: 'pagingtoolbar',
                store:store,   // same store GridPanel is using
                dock: 'bottom',
                displayInfo: true,
                pageSize:5,       
            }],
            renderTo: Ext.getBody()             
        });

        this.callParent(arguments);
    }
});

我的json数据看起来像这样

{
"success": true,
"users": [
    {"id": 1, "name": 'Ed',    "email": "ed@sencha.com"},
    {"id": 2, "name": 'Tommy', "email": "tommy@sencha.com"},

      {"id": 3, "name": 'Tommy', "email": "tommy@sencha.com"},

      {"id": 4, "name": 'Tommy', "email": "tommy@sencha.com"},

      {"id": 5, "name": 'Tommy', "email": "tommy@sencha.com"},

    {"id": 11, "name": 'Ed',    "email": "ed@sencha.com"},
    {"id": 12, "name": 'Tommy', "email": "tommy@sencha.com"},

      {"id": 13, "name": 'Tommy', "email": "tommy@sencha.com"},

      {"id": 14, "name": 'Tommy', "email": "tommy@sencha.com"},

      {"id": 15, "name": 'Tommy', "email": "tommy@sencha.com"},


        {"id": 21, "name": 'Ed',    "email": "ed@sencha.com"},
    {"id": 22, "name": 'Tommy', "email": "tommy@sencha.com"},

      {"id": 23, "name": 'Tommy', "email": "tommy@sencha.com"},

      {"id": 24, "name": 'Tommy', "email": "tommy@sencha.com"},

      {"id": 25, "name": 'Tommy', "email": "tommy@sencha.com"},


]

}

Answer 1

除非您有特殊需要，否则您可能不应该直接使用内存代理。使用JSON将数据加载到存储中是一项非常常见的任务，可以通过Ajax代理自动完成。

放弃您的手动Ext.Ajax.request()来电并将您的proxy更改为Ajax代理：

proxy: {
    type: 'ajax',
    url : 'app/data/users.json'
    reader: {
        type: 'json',
        root: 'users',
        successProperty: 'success'
    }
}

另外，在create()方法中调用initComponent是不正确的。我觉得您应该阅读ExtJS 4应用程序架构tutorial和guide以开始使用ExtJS框架。当我开始使用ExtJS 4时，它们是很好的概述帮助我。（如果我误读了你正在使用不同的ExtJS版本，那么请阅读与你选择的版本相对应的教程和概述）

如何在extjs中加载内存中的ajax响应

1 个答案: