how to load ajax response in memory in extjs

问题:

How to load data in memory in extjs .by using an ajax response.ajax response give an json data. when i try to load into paging grid it doesnt show anything .can any one you idea.its help full to me

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

and my json data look like this

{
"success": true,
"users": [
    {"id": 1, "name": 'Ed',    "email": "[e-mail]"},
    {"id": 2, "name": 'Tommy', "email": "[e-mail]"},

      {"id": 3, "name": 'Tommy', "email": "[e-mail]"},

      {"id": 4, "name": 'Tommy', "email": "[e-mail]"},

      {"id": 5, "name": 'Tommy', "email": "[e-mail]"},

    {"id": 11, "name": 'Ed',    "email": "[e-mail]"},
    {"id": 12, "name": 'Tommy', "email": "[e-mail]"},

      {"id": 13, "name": 'Tommy', "email": "[e-mail]"},

      {"id": 14, "name": 'Tommy', "email": "[e-mail]"},

      {"id": 15, "name": 'Tommy', "email": "[e-mail]"},


        {"id": 21, "name": 'Ed',    "email": "[e-mail]"},
    {"id": 22, "name": 'Tommy', "email": "[e-mail]"},

      {"id": 23, "name": 'Tommy', "email": "[e-mail]"},

      {"id": 24, "name": 'Tommy', "email": "[e-mail]"},

      {"id": 25, "name": 'Tommy', "email": "[e-mail]"},


]

}

回答1:

You probably shouldn't use a Memory proxy directly unless you have some specific need for it. Loading data into a store with JSON is a very common task that is automated nicely with an Ajax proxy.

Drop your manual Ext.Ajax.request() call and change your proxy to an Ajax proxy:

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

Also, calling create() in an initComponent method is incorrect. I get the feeling you should read the ExtJS 4 app architecture tutorial and guide to get you started with the ExtJS framework. They're good overviews that helped me out when I was getting started with ExtJS 4. (If I've misread and you're using a different ExtJS version of course read the tutorial and overview that corresponds to your chosen version)