ExtJS 4-使用远程json存储显示网格

Question

I am a newbie with ExtJS 4. I am trying to display a result list which fetches results from a remote store, without much success. 我是ExtJS 4的新手。我试图显示一个从远程存储中获取结果的结果列表，但收效甚微。

Below is the view file 下面是查看文件

Ext.define('Crm.view.CompanyList', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.companyList',
    store : 'Crm.store.Companies',
    title : 'Company List',

    initComponent: function(){
        this.columns = [ {
            text : 'ID',
            width : 150,
            dataIndex : 'id'
        }, {
            text : 'LastName',
            width : 150,
            sortable : false,
            hideable : false,
            dataIndex : 'lastName'
        }, {
            text : 'First Name',
            width : 150,
            sortable : false,
            hideable : false,
            dataIndex : 'firstName'
        }, {
            text : 'Street',
            flex : 1,
            sortable : false,
            hideable : false,
            dataIndex : 'street'
        } ];
        this.dockedItems = [ {
            xtype : 'pagingtoolbar',
            store : 'Companies',
            dock : 'bottom',
            displayInfo : true
        } ];
        this.callParent();
    }
});

and below is the Model 下面是模型

Ext.define('Crm.model.Company',{
    extend  : 'Ext.data.Model',
    fields  : [
        {name:'id',type:'string'},
        {name:'lastName',type:'string'},
        {name:'firstName',type:'string'},
        {name:'street',type:'string'}
    ]
});

This is how the store is defined 这就是商店的定义方式

Ext.define('Crm.store.Companies', {
    extend: 'Ext.data.Store',
    requires: 'Crm.model.Company',
    model: 'Crm.model.Company',
    autoLoad: {start: 0, limit: 5},
    pageSize: 5,
    remoteSort: true,
    sorters: [{
        property : 'lastName',
        direction: 'asc'
    }],
    proxy: {
        type: 'jsonp',
        url : 'http://extjsinaction.com/crud.php?model=Employee&method=READ',
        reader: {
            type: 'json',
            root: 'data',
            idProperty      : 'id',
            //  successProperty : 'meta.success',
            totalProperty   : 'meta.total'
        }
    }
});

and finally the HTML file which is expected the render the Grid in browser 最后是预期在浏览器中呈现网格的HTML文件

    &lt;html&gt;
    &lt;head&gt;
    &lt;link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css"&gt;
    &lt;script type="text/javascript" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="Crm/view/CompanyList.js"  &gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="Crm/model/Company.js"  &gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="Crm/store/Companies.js"  &gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
    &lt;script type="text/javascript" &gt;
    Ext.onReady(function() {
    Ext.create('Crm.view.CompanyList', {
    });
    );
    &lt;/script&gt;
    &lt;/body&gt;
    &lt;/html&gt;

When I run this in browser, I get the below error in browser console 在浏览器中运行时，在浏览器控制台中出现以下错误

Uncaught TypeError: Cannot read property 'buffered' of undefined ext-all-dev.js:145555

Can someone please guide me to resolve this. 有人可以指导我解决此问题。 Thank you. 谢谢。

Answer 1

The main reason your code fails is that the grid does not have a store. 您的代码失败的主要原因是网格没有存储。 You configure store as string (class name) but this approach works only if you use MVC with Ext.Application when Ext creates the store for you. 您将存储配置为字符串（类名），但是这种方法仅在Ext为您创建存储时将MVC与Ext.Application一起使用时才有效。

You can make the above working by creating the store in initComponent of the grid: 您可以通过在网格的initComponent中创建存储来使上述工作正常进行：

this.store = Ext.create('Crm.store.Companies', {});

For long run I recommend to use Sencha Cmd and MVC (MVVM for Ext 5) architecture. 对于长期运行，我建议使用Sencha Cmd和MVC（Ext 5的MVVM）体系结构。

ExtJS 4-使用远程json存储显示网格

问题描述

1 个解决方案

解决方案1
0 2014-07-29 05:52:51

ExtJS 4-使用远程json存储显示网格

问题描述

1 个解决方案

解决方案1 0 2014-07-29 05:52:51

解决方案1
0 2014-07-29 05:52:51