PDA

View Full Version : Can't get Store to work using MVC pattern



joejernst
19 Nov 2011, 1:27 PM
I am finding it impossible to get a simple MVC application to work if it includes a Store. I keep getting these messages when I include a stores array in the controller:

sencha-touch-all-debug.js:3904 (http://orw-jernst-dt2:7001/supportapi/client/sencha-touch-2.0.0-pr1/sencha-touch-all-debug.js)[Ext.Loader] Synchronously loading 'mvcPOC.view.person.List'; consider adding Ext.require('mvcPOC.view.person.List') above Ext.onReady

sencha-touch-all-debug.js:24669 (http://orw-jernst-dt2:7001/supportapi/client/sencha-touch-2.0.0-pr1/sencha-touch-all-debug.js)Store defined with no model. You may have mistyped the model name.

sencha-touch-all-debug.js:24674 (http://orw-jernst-dt2:7001/supportapi/client/sencha-touch-2.0.0-pr1/sencha-touch-all-debug.js)Uncaught TypeError: Cannot call method 'getProxy' of undefined


Here are my application files:

index.html:


<!DOCTYPE html>
<html>
<head>
<title>The Sencha Touch MVC POC</title>

<link rel="stylesheet" href="../sencha-touch-2.0.0-pr1/resources/css/sencha-touch.css" type="text/css" media="screen"/>
<script src="../sencha-touch-2.0.0-pr1/sencha-touch-all-debug.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
Ext.Loader.setConfig(
{
enabled: true,
paths: {
mvcPOC : 'app'
}
}
);

Ext.application({
name: 'mvcPOC',
appFolder: 'app',
autoCreateViewport: true,
models: ['Person'],
controllers: ['Person'],
launch: function() {
alert('Application Launched');
}
});
</script>
</head>
<body>
</body>
</html>

app/controller/Person.js:

Ext.define('mvcPOC.controller.Person', {
extend: 'Ext.app.Controller',
views: ['person.List'],
stores: ['Person'],
init: function() {
alert('controller init');
}
});

app/model/Person.js:

Ext.define('mvcPOC.model.Person', {
extend: 'Ext.data.Model',
config: {
fields: [
{name:'firstName', type: 'string'},
{name:'lastName', type: 'string'}
]
}
});

app/store/Person.js:

Ext.define('mvcPOC.store.Person',
{
extend: 'Ext.data.Store',
config: {
model: 'Person',
data: [{firstName: 'John', lastName: 'Doe'}]
}
});

app/view/person/List.js:

Ext.define('mvcPOC.view.person.List', {
extend: 'Ext.Panel',
config: {
layout: 'vbox',
items: [
{
xtype: 'list',
flex: 1,
store: 'Person',
itemTpl: '<div>{firstName} {lastName}</div>'
}
]
}
});

app/view/Vieport.js:

Ext.define('mvcPOC.view.Viewport', {
extend: 'Ext.Carousel',
id: 'viewport',
config: {
layout: 'card',
fullscreen: true,
cardSwitchAnimation: 'slide',
items: [
Ext.create('mvcPOC.view.person.List')
]
}
});

What am I doing wrong here? It seems so simple yet I can't get it to work if the stores array is defined.

mitchellsimoens
19 Nov 2011, 3:15 PM
First log you are getting is because you are instantiating the mvcPOC.view.person.List class in your mvcPOC.view.Viewport class definition. You should specify it as an xtype and give your List class an alias.

You aren't specifying a proxy on your Store or Model so that's why you are getting the last two but it really shouldn't since a proxy isn't always needed.

joejernst
19 Nov 2011, 4:54 PM
I took care of the first message by adding an alias to my view.person.List class.

The only way I can get the app to work with a store is to define it inline with the list view like so:


Ext.define('mvcPOC.view.person.List', {
extend: 'Ext.Panel',
alias: ['widget.personList'],
config: {
layout: 'vbox',
items: [
{
xtype: 'list',
flex: 1,
store: {
xtype: 'store',
fields: [
{name:'firstName', type: 'string'},
{name:'lastName', type: 'string'}
],
data: [
{firstName: 'John', lastName: 'Doe'}
]
},
itemTpl: '<div>{firstName} {lastName}</div>'
}
]
}
});

My original code used a proxy and gave the same error. I have pared it down to the simplest test case to reproduce the problem. As soon as I try to split the store and/or model out into classes it fails.

Is this a known bug with 2.0.0pr1?

joejernst
21 Nov 2011, 8:54 AM
Somehow I never noticed that a pr2 was available, so I downloaded it and tried this same testcase using pr2. It still gives the same results.

rdougan
21 Nov 2011, 11:19 AM
The problem is that the Ext.data.* package does not support and new configuration system yet. So anything you define in the config block should just go in the main object:


Ext.define('mvcPOC.model.Person', {
extend: 'Ext.data.Model',
fields: [
{name:'firstName', type: 'string'},
{name:'lastName', type: 'string'}
]
});


Ext.define('mvcPOC.store.Person', {
extend: 'Ext.data.Store',
model: 'Person',
data: [{firstName: 'John', lastName: 'Doe'}]
});

joejernst
21 Nov 2011, 11:43 AM
Thanks for the reply,

I tried that, but now I get this message:

.../supportapi/client/mvcPOC/Person.js?_dc=1321904477114 (http://147.34.69.172:7001/supportapi/client/mvcPOC/Person.js?_dc=1321904477114) 404 (Not Found)

sencha-touch-all-debug.js:4837 (http://147.34.69.172:7001/supportapi/client/sencha-touch-2-pr2/sencha-touch-all-debug.js)Uncaught Error: [Ext.Loader] Failed loading 'Person.js', please verify that the file exists


Do I just need to wait for a pr3+ that has this implemented for the data package? If so, that's OK. I just want to make sure I understand how this is supposed to work.

rdougan
21 Nov 2011, 11:44 AM
Are you sure the Person.js file is in the model/ folder?

joejernst
21 Nov 2011, 1:38 PM
Yes, that file is there. I have zipped my application and attached it so you can use it as a testcase.

diesalher
23 Nov 2011, 4:22 AM
Hi

im a newbie here but i'm working without problems with MVC and Stores...

here is my code if it helps you

index.html




<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>AppName</title>
<link rel="stylesheet" href="touch/resources/css/sencha-touch.css" type="text/css">
<link rel="stylesheet" href="resources/css/app.css" type="text/css">


<!-- api de Google maps . antes de las otras please-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>


<script type="text/javascript" src="touch/sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>



</head>
<body></body>
</html>




app.js



Ext.Loader.setConfig({
enabled: true
});


Ext.application({
name: 'AppName',
controllers: ['Main','Informacion'],
models:['Favorite','Warning'] ,
stores:['Favorites','Warnings'] ,
launch: function() {
Ext.create('AppName.view.Viewport');
}
}) ;

diesalher
23 Nov 2011, 7:14 AM
Anyway, i've made the skeleton of a MVC Sencha touch application for you (or anyone) to use..

just add a touch folder with sencha touch 2 pr2

29515

diesalher
23 Nov 2011, 7:24 AM
anyway i made your app work...

in store/Person.js



Ext.define('mvcPOC.store.Person', {
extend: 'Ext.data.Store',
model: 'mvcPOC.model.Person',
data: [{firstName: 'John', lastName: 'Doe'}]
});

joejernst
23 Nov 2011, 10:06 AM
In addition to the change you made to the Person store's model reference, I also had to move the stores array definition out of the Controller and into the Application.

So, if I understand this correctly, these changes are a workaround for 2.0.0pr2, but whenever the data package is migrated to the new component structure, then my original code should work.

Can someone confirm?

aguerra10
24 Nov 2011, 5:14 AM
Hi!!

I am also having problems with stores, but only when running the application in a device.
I was trying with my own project but I couldn't make it work, so I decided to test diesalher (http://www.sencha.com/forum/member.php?337025-diesalher) files...

Well.. Everything works fine in the browser. However when I run my app in the device (I use PhoneGap), the screen remains white.

I figured out that if I comment the

stores:['Skeletons'] ,

line in app.js, the application launches (it shows the alert). However, whenever I uncomment that line the app does not launch. This line is making me crazy!!

I am having no errors in the console so I really do not know what could be causing this problem.

Could anybody help me?

Thanks!!!

aguerra10
24 Nov 2011, 5:33 AM
I have just tested it in Android and it works fine, the problem is only with iOS... :-?

diesalher
24 Nov 2011, 6:23 AM
I tested it with phonegap and an android emulator and shows the blank screen. Do u tested it with an emulator or device?

i'm trying to figure out why it's not working..

Any help will be much appreciated.

aguerra10
24 Nov 2011, 6:34 AM
I tested it with phonegap and an android emulator and shows the blank screen. Do u tested it with an emulator or device?

i'm trying to figure out why it's not working..

Any help will be much appreciated.

Hi diesalher,

I tested it on an Android device and it worked...
Please keep me updated.

Thanks!!

diesalher
24 Nov 2011, 7:03 AM
Ok, it worked now..

I created a new emulator (2.3.3), cleaned the project...and the content of my assets/www is

29544

Im developing on windows so i can't test now in ios , but seems to work in Android).

Going to test a more complex project now...

aguerra10
24 Nov 2011, 8:26 AM
Ok, it worked now..

I created a new emulator (2.3.3), cleaned the project...and the content of my assets/www is

29544

Im developing on windows so i can't test now in ios , but seems to work in Android).

Going to test a more complex project now...

I forgot about that.. I am also having problems with Android versions < 2.3..

So.. if anyone could help with iOS I would really appreciate that.

Thanks!!

diesalher
24 Nov 2011, 8:37 AM
.when i'm testing my app in an android device, it crashes when i put it in landscape mode....

aguerra10
24 Nov 2011, 12:00 PM
.when i'm testing my app in an android device, it crashes when i put it in landscape mode....

I am not having that problem.. However you could check AndroidManifest.xml file and see if you have:

android:configChanges="orientation|keyboardHidden"
android:windowSoftInputMode="adjustPan"

in the activities nodes.

diesalher
25 Nov 2011, 6:02 AM
i added the

android:windowSoftInputMode="adjustPan"

but still no luck

IsaacKoss
1 Dec 2011, 9:40 AM
Thanks for the Zip file example. This is what Sencha needs to do for people new to this library. Thanks again :).

diesalher
1 Dec 2011, 9:44 AM
Thanks for the Zip file example. This is what Sencha needs to do for people new to this library. Thanks again :).

You're welcome.

Anyway. i'm an absolute begginer in Sencha , javascript and HTML5 , so be careful because my little application could have errors or be wrong with the pattern.

khushkedia
12 Apr 2012, 6:48 PM
After trying for hours, am not able to get a simple code run using MVC to populate a list using store.

The code for the person list is


{ xtype : 'list', store : 'personListStore', //itemTpl : '<div class="contact">HI {name}<br/> sfsdf{email}</div>', itemTpl : '<div class="contact">HI <br/> sfsdf</div>', listeners : { itemtap : function(view, index, item, e) { var record = view.getStore().getAt(index); Ext.getCmp('viewport').animateActiveItem('login', { type : 'slide', direction : 'right' }); } }and the code used in the store is:

Ext.define('iPolis.store.personListStore', { extend: 'Ext.data.Store', model : 'iPolis.model.personListModel', proxy : { type : 'ajax', url : '/users.json', reader: { type: 'json', rootProperty: 'users' } }, autoLoad: true});There might be a very small issue that am overlooking. Please help.

diesalher
13 Apr 2012, 2:12 AM
After trying for hours, am not able to get a simple code run using MVC to populate a list using store.

The code for the person list is


{ xtype : 'list', store : 'personListStore', //itemTpl : '<div class="contact">HI {name}<br/> sfsdf{email}</div>', itemTpl : '<div class="contact">HI <br/> sfsdf</div>', listeners : { itemtap : function(view, index, item, e) { var record = view.getStore().getAt(index); Ext.getCmp('viewport').animateActiveItem('login', { type : 'slide', direction : 'right' }); } }and the code used in the store is:

Ext.define('iPolis.store.personListStore', { extend: 'Ext.data.Store', model : 'iPolis.model.personListModel', proxy : { type : 'ajax', url : '/users.json', reader: { type: 'json', rootProperty: 'users' } }, autoLoad: true});There might be a very small issue that am overlooking. Please help.

2 random thoughts.


try without the "/" in users.json



and try this




layout:{
type: 'card'
},
items: [
{
xtype : 'list',
store : 'personListStore',
layout:'auto',
itemTpl:'Hello {name}!'
}]





if u could post the full view code and the model it will be helpful, because it could be a layout problem

diesalher
13 Apr 2012, 2:19 AM
or if u can zip the app and post it here, i can try to run it

mitchellsimoens
13 Apr 2012, 4:12 AM
Passing a string to the store config of the list means the list will look at the StoreManager to see if there is a store created with a storeId that matches the value of the store config. So you passed 'personListStore' as your store but the store you are wanting doesn't have a storeId config at all.

diesalher
13 Apr 2012, 4:35 AM
I dont have a storeId in the store neither, and i have lists with with strings in the store config working..as long i have the store referenced in the stores section of my app.js...

mitchellsimoens
13 Apr 2012, 4:48 AM
I dont have a storeId in the store neither, and i have lists with with strings in the store config working..as long i have the store referenced in the stores section of my app.js...

I don't like to recommend that approach. THe reason is this... people new to the framework trying to learn it don't know what's going on and will expect this behavior throughout the framework causing issues. At the bare minimum I would recommend doing something like


{
xclass : 'MyApp.store.Test'
}

That way they know what is going on. Giving the store config to 'Test' here would work but for a new person is it because of the store class name or the storeId or something else? This type of framework behavior is convenient but adds a god deal of confusion.