如何加载在ExtJS的内存Ajax响应

问题描述

如何将数据加载在内存中的ExtJS的。通过使用Ajax response.ajax响应给出一个JSON数据。当我尝试加载到分页格它不显示任何东西。可任何一个你idea.its帮全给我

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

和我的JSON数据看起来像这样

and my json data look like this

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

      {"id": 3, "name": 'Tommy', "email": "[email protected]"},

      {"id": 4, "name": 'Tommy', "email": "[email protected]"},

      {"id": 5, "name": 'Tommy', "email": "[email protected]"},

    {"id": 11, "name": 'Ed',    "email": "[email protected]"},
    {"id": 12, "name": 'Tommy', "email": "[email protected]"},

      {"id": 13, "name": 'Tommy', "email": "[email protected]"},

      {"id": 14, "name": 'Tommy', "email": "[email protected]"},

      {"id": 15, "name": 'Tommy', "email": "[email protected]"},


        {"id": 21, "name": 'Ed',    "email": "[email protected]"},
    {"id": 22, "name": 'Tommy', "email": "[email protected]"},

      {"id": 23, "name": 'Tommy', "email": "[email protected]"},

      {"id": 24, "name": 'Tommy', "email": "[email protected]"},

      {"id": 25, "name": 'Tommy', "email": "[email protected]"},


]

}

推荐答案

您可能不应该使用内存代理直接除非你有它的一些特定的需要。将数据加载到使用JSON商店是与Ajax代理好听自动化一种很常见的事。

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.

放下你的手册 Ext.Ajax.request（）通话和改变你的代理来一个Ajax代理：

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'
    }
}

此外，调用在 initComponent 方法来创建（）不正确。我感觉你应该阅读的ExtJS 4的应用程序体系结构教程和指南让您开始使用ExtJS的框架。他们是很好的概述，帮助我出来的时候，我开始使用ExtJS的4。（如果我看错了，你使用的是其他版本的ExtJS当然读取对应于您所选择的版本的教程和概述）

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)

这篇关于如何加载在ExtJS的内存Ajax响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！