Extjs Not Showing data from store
I`m learning Extjs and trying to follow this tutorial http://www.sencha.com/learn/the-mvc-application-architecture/ Everything went well.. But when I continue to 'Creating a Model and a Store' and do as written in tutorial then run it. It give error : Uncaugh开发者_运维百科t TypeError: Cannot read property 'items' of undefined Is there is something I missed up? Thank you
/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 library is located at /extjs
Just as a syntax based comment, you have an extra comma after 'userlist' in your myapp.js file and also after 'All Users' in your List.js file.
Also, in the comments on that tutorial there is reference to a similar issue where the resolution was to:
define the ‘columns’ property for the ‘List’ view
Try adding this to your list:
columns: [
{header: 'Name', dataIndex: 'name'},
{header: 'Email', dataIndex: 'email'}
]
Okay look like that you want to try the sencha mvc example @ examples/app/simple
This example have a bug because the need to explicit load of Ext.container.Viewport on application launch
launch: function() {
Ext.create('Ext.container.Viewport', { //this line do explicit load on Viewport class
So to solve this you need an extra line on your myapp.js at the first line
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'
],
....
加载中,请稍侯......
精彩评论