PDA

View Full Version : Cannot read data store, based on MVC example



dublinan
23 Feb 2012, 1:27 PM
I'm new to extjs, so I'm following the MVC tut provided here

http://docs.sencha.com/ext-js/4-0/#!/guide/application_architecture.

The problem I am having is loading data from the Store Users.js. I keep getting this javascript error.

Uncaught TypeError: Cannot read property 'items' of undefined

Here is my Controller - Users.js


Ext.define('AM.controller.Users', {
extend: 'Ext.app.Controller',
stores: ['Users'],
models: ['User'],
views: [
'user.List',
'user.Edit'
],
init: function() {
this.control({
'userList': {
itemdblclick: this.editUser
},
'useredit button[action=save]': {
click: this.updateUser
}
});
},
editUser: function(grid, record) {
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
},
updateUser: function(button) {
console.log('clicked the Save button');
}
});


Here is my Model - User.js


Ext.define('AM.model.User', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'email', type: 'string'}
]
});


Here is my View - user/List.js


Ext.define('AM.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userList',
store: 'Users',
title: 'All Users'
});


Here is my Store - Users.js


Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
data: [
{name: 'Ed', email: '[email protected]'},
{name: 'Tommy', email: '[email protected]'}
]
});


I'm following the instructions exactly, what am I doing wrong here? :((

vietits
23 Feb 2012, 5:43 PM
You have no columns definition for your grid?


Ext.define('AM.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userList',
store: 'Users',
title: 'All Users'
});

dublinan
23 Feb 2012, 8:04 PM
I thought the columns are determined by the model?

Anyway, I find that loading the store data and columns in the view work, but that is an anti-pattern. I'll keep looking through the docs, there's got to some syntax error, or something that I'm not loading.

dublinan
23 Feb 2012, 8:13 PM
Found another example of using Store/Model approach here

http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2/

This example shows the Store adding a require property



Ext.define('Panda.store.Stations', {
extend: 'Ext.data.Store',
requires: 'Panda.model.Station',
model: 'Panda.model.Station'
});


I'll give this a shot in the morning, hopefully it works

vietits
23 Feb 2012, 8:30 PM
I thought the columns are determined by the model?

No. Model just defines which fields that your data object has and grid columns defines columns that appear in the grid. It also defines the field from the model from which to draw data for each column.

dublinan
23 Feb 2012, 8:55 PM
So I define the columns in the view?

vietits
23 Feb 2012, 9:01 PM
Yes.


Ext.define('AM.view.user.List', {
extend: 'Ext.grid.Panel',
alias: 'widget.userList',
store: 'Users',
title: 'All Users',
columns: [{
....
}]
});

dublinan
23 Feb 2012, 9:04 PM
Interesting, I'll give it a shot and let you know the results.

My concern is, what if I am returning less data cells than there are columns, is there a way to dynamically create columns based on row/cells returned?

vietits
23 Feb 2012, 9:48 PM
1. No problem. It does not need to map one-one between grid's columns and model's fields. You can use data from one field for many columns in the grid and a column maybe not have any field linked with it.

2. You can dynamically create grid columns by some ways:
Construct an array variable that contains columns definitions and then set grid columns config to this variable.
Extend Ext.grid.Panel and implement initComponent() in which you construct columns dynamically.
Change the columns of a grid object by using reConfigure() method.

dublinan
24 Feb 2012, 12:00 PM
so I added this to my views and it worked.



columns: [{
header: 'Name',
dataIndex: 'name'
},{
header: 'Email',
dataIndex: 'email'
}]


Thanks again