GRID 未在 ExtJS 4 中使用 Store 正确呈现
Posted
技术标签:
【中文标题】GRID 未在 ExtJS 4 中使用 Store 正确呈现【英文标题】：GRID is not properly rendered in ExtJS 4 by using Store 【发布时间】：2012-03-29 12:32:00 【问题描述】：这是 html 文件的 Src 代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4 /strict.dtd">
<html>
<head>
<title>MVC Architecture</title>
<link rel="stylesheet" type="text/css" href="/bh/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="Main.js"></script>
</head>
<body>
</body>
</html>
文件路径：/bh/Main.js [主文件]
Ext.require('Ext.container.Viewport');
Ext.application(
name: 'App',
appFolder: 'app',
controllers: ['UserController'],
launch: function()
Ext.create('Ext.container.Viewport',
layout: 'border',
items: [
xtype: 'userList'
]
);
);
文件路径：/app/controller/UserController.js [控制器]
Ext.define('App.controller.UserController',
extend: 'Ext.app.Controller',
stores: ['UserStore'],
models:['UserModel'],
views:['user.UserList'],
init: function()
this.getUserStoreStore().load();
);
文件路径：/app/store/UserStore.js
Ext.define('App.store.UserStore',
extend: 'Ext.data.Store',
model: 'App.model.UserModel',
proxy:
type: 'ajax',
url: 'app/data/contact.json'
);
文件路径：/app/model/UserModel.js [模型]
Ext.define('App.model.UserModel',
extends:'Ext.data.Model',
fields:[
name: 'name', type: 'string',
name: 'age', type: 'string',
name: 'phone', type: 'string',
name: 'email', type: 'string'
]
);
文件路径：/app/view/UserList.js [查看]
Ext.define('App.view.user.UserList' ,
extend: 'Ext.grid.Panel',
alias:'widget.userList',
title:'Contacts',
region:'center',
resizable:true,
initComponent: function()
this.store = 'UserStore';
this.columns = [
text: 'Name',flex:1,sortable: true,dataIndex: 'name',
text: 'Age',flex:1,sortable: true,dataIndex: 'age',
text: 'Phone',flex:1,sortable: true,dataIndex: 'phone',
text: 'Email',flex:1,sortable: true,dataIndex: 'email'
];
this.callParent(arguments);
);
在 fire bug 中，它显示 JSON 响应如下：
[
"name": "Aswini",
"age": "32",
"phone": "555-555-5555",
"email": "aswininayak@.in"
]
虽然我有一个有效的 json 响应，但为什么没有显示数据。请帮忙！！！
【问题讨论】：
哦，这是我在 Store 文件中写的 extends 而不是 extend 它应该是 extend:'Ext.data.Model' 您有有效的 JSON 响应，但您的商店中有记录吗？ 如果有，可以分享一下解决方案吗？ @Patton 检查我的答案，他只需要配置读取，因为他使用的是通用的Ext.data.Store。
【参考方案1】：
我相信您的网格没有加载，因为您没有正确加载商店。你应该使用。
this.getStore('userStore').load();
而不是
this.getUserStoreStore().load();
【讨论】：
当你在定义了 store 的 Controller 中使用时，这两个调用是等价的。【参考方案2】：您应该在代理中配置您的阅读器，如下所示：
Ext.define('App.store.UserStore',
extend: 'Ext.data.Store',
model: 'App.model.UserModel',
proxy:
type: 'ajax',
url: 'app/data/contact.json',
reader:
type: 'json'
);
【讨论】：
以上是关于GRID 未在 ExtJS 4 中使用 Store 正确呈现的主要内容，如果未能解决你的问题，请参考以下文章
关于ExtJS的grid store加载的问题，grid改变列之后，用grid.reconfigure追加列，只加载新追加列的数据