denisputnam
22 Apr 2012, 8:11 PM
Hi,
I am using Architect to write the AM example from http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture guide. I have attached a zip of the project. Can someone look at it in the Architect designer and tell me what I am doing wrong?
-Denis
Below is the source code produced by Architect and the data/users.json file.
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
models: [
'User'
],
stores: [
'Users'
],
autoCreateViewport: true,
name: 'AM',
controllers: [
'Users'
],
launch: function() {
Ext.create( 'Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'userlist'
}
});
}
});
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
models: [
'User'
],
stores: [
'Users'
],
views: [
'user.List'
],
init: function(application) {
this.control({
'viewport > userlist': {
itemdblclick: this.editUser
}
});
},
editUser: function() {
console.log('Double clicked on ' + record.get( 'name' ) );
}
});
Ext.define('AM.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
height: 250,
width: 400,
autoScroll: true,
title: 'All Users',
store: 'Users',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
flex: 1,
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'email',
flex: 1,
text: 'Email'
}
]
});
me.callParent(arguments);
}
});
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
requires: [
'AM.model.User'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'UsersStore',
model: 'AM.model.User'
}, cfg)]);
}
});
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
root: 'users'
}
}
});
data/users.json file:
{
success: true,
users: [
{ id: 1, name: 'Ed', email: 'ed@sencha.com' },
{ id: 2, name: 'Tommy', email: 'tommy@sencha.com' }
]
}
I am using Architect to write the AM example from http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture guide. I have attached a zip of the project. Can someone look at it in the Architect designer and tell me what I am doing wrong?
-Denis
Below is the source code produced by Architect and the data/users.json file.
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
models: [
'User'
],
stores: [
'Users'
],
autoCreateViewport: true,
name: 'AM',
controllers: [
'Users'
],
launch: function() {
Ext.create( 'Ext.container.Viewport', {
layout: 'fit',
items: {
xtype: 'userlist'
}
});
}
});
Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
models: [
'User'
],
stores: [
'Users'
],
views: [
'user.List'
],
init: function(application) {
this.control({
'viewport > userlist': {
itemdblclick: this.editUser
}
});
},
editUser: function() {
console.log('Double clicked on ' + record.get( 'name' ) );
}
});
Ext.define('AM.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
height: 250,
width: 400,
autoScroll: true,
title: 'All Users',
store: 'Users',
initComponent: function() {
var me = this;
Ext.applyIf(me, {
viewConfig: {
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'name',
flex: 1,
text: 'Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'email',
flex: 1,
text: 'Email'
}
]
});
me.callParent(arguments);
}
});
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
requires: [
'AM.model.User'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
storeId: 'UsersStore',
model: 'AM.model.User'
}, cfg)]);
}
});
Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
proxy: {
type: 'ajax',
url: 'data/users.json',
reader: {
type: 'json',
root: 'users'
}
}
});
data/users.json file:
{
success: true,
users: [
{ id: 1, name: 'Ed', email: 'ed@sencha.com' },
{ id: 2, name: 'Tommy', email: 'tommy@sencha.com' }
]
}