[英]Extjs Not Showing data from store
我正在學習Extjs並嘗試按照本教程http://www.sencha.com/learn/the-mvc-application-architecture/一切順利..但是當我繼續'創建模型和商店'時按照教程編寫然后運行它。 它給出錯誤:Uncaught TypeError:無法讀取未定義的屬性'items'是否有錯過的東西? 謝謝
/app/controller/User.js
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores: [
'Users'],
models: ['User'],
views: [
'user.List',
'user.Edit'],
init: function () {
this.control({
'viewport > panel': {
render: this.onPanelRendered
},
'userlist': {
itemdblclick: this.editUser
}
});
},
editUser: function (grid, record) {
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
},
onPanelRendered: function () {
console.log('panel rendered');
}
})
/app/model/User.js
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: ['name', 'email']
});
/app/store/Users.js
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
data: [
{name: 'Ed', email: 'ed@sencha.com'},
{name: 'Tommy', email: 'tommy@sencha.com'}
]
});
/app/view/user/Edit.js
Ext.define('AM.view.user.Edit', {
extend: 'Ext.window.Window',
alias : 'widget.useredit',
title : 'Edit User',
layout: 'fit',
autoShow: true,
initComponent: function() {
this.items = [
{
xtype: 'form',
items: [
{
xtype: 'textfield',
name : 'name',
fieldLabel: 'Name'
},
{
xtype: 'textfield',
name : 'email',
fieldLabel: 'Email'
}
]
}
];
this.buttons = [
{
text: 'Save',
action: 'save'
},
{
text: 'Cancel',
scope: this,
handler: this.close
}
];
this.callParent(arguments);
}
});
/app/view/user/List.js
Ext.define('AM.view.user.List',{
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
store: 'Users',
title: 'All users',
});
/myapp.js
Ext.application({
name: 'AM',
controllers : ['Users'],
appFolder: 'app',
launch: function() {
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [
{
xtype: 'userlist',
}
]
});
}
});
/index.html
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/ext-debug.js"></script>
<script type="text/javascript" src="myapp.js"></script>
</head>
<body>
Loading apps.........
</body>
</html>
Extjs庫位於/ extjs
就像基於語法的注釋一樣,在myapp.js文件中的'userlist'之后以及List.js文件中的'All Users'之后還有一個額外的逗號。
此外,在該教程的評論中提到了一個類似的問題,其中的決議是:
定義“列表”視圖的“列”屬性
嘗試將此添加到您的列表中:
columns: [
{header: 'Name', dataIndex: 'name'},
{header: 'Email', dataIndex: 'email'}
]
好的,看起來你想嘗試一下sencha mvc的例子@ examples / app / simple這個例子有一個bug,因為需要在應用程序啟動時顯式加載Ext.container.Viewport
launch: function() {
Ext.create('Ext.container.Viewport', { //this line do explicit load on Viewport class
因此,要解決此問題,您需要在第一行的myapp.js
上添加一行
Ext.Loader.setConfig({enabled:true}); //need to enable dynamically load the Ext.container.Viewport
Ext.application({
name: 'AM',
//paths direct to the Ext src path folder i.e given here if accessed from http://localhost/ext/examples/app/simple/simple.html
paths: {
'Ext': '../../../src/'
},
controllers: [
'Users'
],
....
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.