PDA

View Full Version : MVC Local Storage & Controller Error



Rhoover
14 Jun 2011, 8:46 AM
With my thanks for the docs, the forum and the generous sharing of code (https://github.com/SlyRax/GeoContacts), I've managed to learn my way from zero to an almost fully functioning MVC type application.

The roadblock now is the error message I get when trying to 'save' data from a Form Panel to an otherwise functioning store.

My controller.js tells me "Cannot read property 'store' of undefined". I'll set the story code-wise and show the error.

Any help in understanding why I'm getting this error is humbly :"> appreciated. I'm stumped.

app.js:


Brewnotes = new Ext.Application({
defaultTarget:"viewport",
defaultUrl:"BrewNotes/index",
scroll:true,
name: "Brewnotes",
launch: function() {
this.viewport = new Brewnotes.Viewport();
}
});

Home Panel:


Brewnotes.views.BrewnotesHome = Ext.extend(Ext.Panel,{
id:'homepanel',
styleHtmlContent:'true',
scroll:'vertical',
layout:{type:'vbox',pack:'center',align:'center',flex: 1},
items:[
{xtype:'spacer'},
{xtype:'spacer'},
{xtype:'button',ui:'Normal',width:235,cls:'homebuttons',text:'Add New Note',id:'addButton'},
{xtype:'spacer'},
{xtype:'button',ui:'Normal',width:235,cls:'homebuttons',text:'Notes Lists',id:'listentryButton'},
{xtype:'spacer'},
{xtype:'button',ui:'Normal',width:235,cls:'homebuttons',text:'Save To SD Card',id:'exportButton'},
{xtype:'spacer'},
{xtype:'spacer'}
],
initComponent:function(){
Brewnotes.views.BrewnotesHome.superclass.initComponent.apply(this,arguments);
}
});
Ext.reg('brewnotes-home',Brewnotes.views.BrewnotesHome);

The Models and Stores are all working fine when I use in-line data as a placeholder and don't throw any errors in their 'final' state.


Ext.regStore('brewnotesStore',{
model:'BrewNotes',
autoLoad:true,
proxy:{type:'localstorage',id:'brewnotesStore',proxy:{idProperty:'id'}}
});

One of the List Panels (there are two with different sorting):


Brewnotes.views.BrewnotesBrewList = Ext.extend(Ext.Panel,{
id:'brewlistpanel',
styleHtmlContent:'true',
scroll:'vertical',
layout:'fit',
dockedItems: {
dock:'bottom',
xtype:'toolbar',
cls:'navbar',
items: [
{xtype:'spacer'},
{text:'Back',ui:'normal',cls:'navbuttons',id:'back2Button'},
{xtype:'spacer'},
{text:'Home',ui:'normal',cls:'navbuttons',id:'homeButton'},
{xtype:'spacer'}
]
},
initComponent:function(){
this.store = Ext.getStore('brewnotesStore');
this.list = new Ext.List({
itemTpl:['<h4>{brewName}</h4>','<p class="itembottom">{breweryName}</p>'],
store:this.store,
emptyText:'<h3>Craft beer is an ancient tradition. Respect the art and science of brewing: sip and taste responsibly.</h3>'
//grouped:true
});
this.items = [this.list];
Brewnotes.views.BrewnotesBrewList.superclass.initComponent.apply(this,arguments);
}
});
Ext.reg('brewnotes-brewlist',Brewnotes.views.BrewnotesBrewList);

And finally the Controller, where all works well (including the Msg.alert) except the error message as noted above (snipped for readability here):


Ext.regController("BrewNotes",{
model:"BrewNotes",

//for home panel
index:function(){
if (!this.home) {
this.home = this.render({
xtype:'brewnotes-home',
});
this.home.query('#addButton')[0].on({
tap:this.compose,
scope:this
});
this.home.query('#listentryButton')[0].on({
tap:this.listEntry,
scope:this
});
Ext.getCmp('viewport').setActiveItem(this.home);
}
else {
Ext.getCmp('viewport').setActiveItem(this.home, {
type:'slide',
direction:'right',
cover:true
});
}
},

//
// snipped
//

//for form panel
compose:function(){
this.form = this.render({
xtype:'brewnotes-form',
listeners:{
deactivate:function(form){
form.destroy();
}
}
});
this.form.query('#homeButton')[0].on({
tap:this.index,
scope:this
});
this.form.query('#saveButton')[0].on({
tap:this.create,
scope: this
});
this.form.query('#resetButton')[0].on({
tap:function(form){this.form.reset();},
scope:this
});
Ext.getCmp('viewport').setActiveItem(this.form,{
type:'fade',
//direction:'left',
cover:true
});
},

//
// snipped
//

//for list panel
brewList:function(){
this.brewlist = this.render({
xtype:'brewnotes-brewlist',
listeners:{
beforerender: function(brewlist){
this.store.sort('brewName','ASC');
},
deactivate:function(brewlist){
brewlist.destroy();
},
list:{
select:this.showFromList,
scope:this
},
activate:function(brewlist){
brewlist.list.getSelectionModel().deselectAll();
}
}
});
this.brewlist.query('#back2Button')[0].on({
tap:this.listEntry,
scope:this
});
this.brewlist.query('#homeButton')[0].on({
tap:this.index,
scope:this
});
Ext.getCmp('viewport').setActiveItem(this.brewlist,{
type:'fade',
//direction:'left',
cover:true
});
},

//for details panel
showFromList: function(list, record){
var model = Ext.ModelMgr.create(record.data,'BrewNotes');
this.show(model);
},

//referenced from form panel above to 'save' entered data
create:function(){
var model = Ext.ModelMgr.create(this.form.getValues(),'BrewNotes');
var errors = model.validate(),message="";
if (errors.isValid()){
this.brewlist.store.create(this.form.getValues());

//ERROR MSG : "Cannot read property 'store' of undefined"

this.index();
} else{
Ext.each(errors.items,function(rec,i){
message += rec.message + '<br><br>';
});
Ext.Msg.alert('You Forgot Something:<br>',message,function(){});
return false;
}
}
});

Thank you again for any insight and tips, I'm sure it's something simple!

jmclem
14 Jun 2011, 12:32 PM
Hi,

where are you calling your brewList() function which should create the brewlist in the controller? (maybe I missed it, but searching didn't show this)

Jean-Marie

Rhoover
14 Jun 2011, 12:55 PM
Hi,

where are you calling your brewList() function which should create the brewlist in the controller? (maybe I missed it, but searching didn't show this)

Jean-Marie

thx for taking a look! i snipped out the controller:action of a panel for this post called 'listentry' from which brewlist is called. didn't seem material as it does nothing really except present two buttons to choose from to go to different list panels: 'brewerylist' (sort by brewery) and 'brewlist' (sort by brew).

jmclem
14 Jun 2011, 1:35 PM
Ok, no time to read the whole code, but obviously, this.brewlist is undefined when you reach the mentioned line. Did you try to follow code execution in a debugger to understand why?

Jean-Marie.