PDA

View Full Version : app loader paths for models and stores not being recognized in controller



dakhaj
8 Apr 2013, 12:07 PM
newbie. In every example I see stores and models are defined in controllers without their full path name. For example: stores: ['TestStore'] rather than stores:['SWEB.store.TestStore]'. But when I try to use just the classname ['TestStore'] the application does not load and in the console I get a 404 error and the app is looking for the store file under the controller directory website/app/controller/store and the model file in website/app/controller/model .

Here is the app.js and controller, store and model files:

app.js //resides in app folder

Ext.Loader.setConfig({ enabled: true,
paths: {
'SWEB.controller': 'app/controller',
'SWEB.model': 'app/model',
'SWEB.store': 'app/store',
'SWEB.view': 'app/view'
}
});
Ext.application({
name: 'SWEB',
appFolder: 'app',
autoCreateViewport: true,
controllers: ['WebServices'],
models: ['TestModel'],
stores: ['TestStore'],
views: ['Viewport','Login','SimpleTest'],
launch: function () {
SWEB.app = this;
}
});

Ext.define('SWEB.controller.WebServices', { //resides in app/controller folder
extend: 'Ext.app.Controller',
requires: ['SWEB.view.Login', 'SWEB.view.Simple'],
models: ['TestModel'],
stores: ['TestStore'],
refs: [
{ ref: 'loginForm',
selector: 'loginholder'
},
{ ref: 'simpleForm',
selector: 'simpletest'
}
],
init: function () {
this.control({
'button[action=doLoginUser]': {
'click': this.loginUser,
scope: this
},
'button[action=loaddata]': {
'click': this.loadData,
scope: this
}
});
},///partial file showing here

Ext.define('SWEB.store.TestStore', { //resides in app/store folder
extend: 'Ext.data.Store',
requires: ['SWEB.model.TestModel'],
model: 'SWEB.model.TestModel',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'app/data/TestData.json',
reader: { type: 'json',
root: 'data',
successProperty: 'success',
totalProperty: 'total'
}
},
autoload: null
});

Ext.define('SWEB.model.TestModel', { //resides in app/model folder
extend: 'Ext.data.Model',
fields: [
{ name: 'Firstname', type: 'string' },
{ name: 'Lastname', type: 'string' },
{ name: 'Email', type: 'string' },
{ name: 'State', type: 'string' }
]
});
and here is index.html //resides at root of web site same level as app folder
<!DOCTYPE text/plain>
<html lang="en">
<head>
<title id="page-title">SWEB</title>
<link rel="stylesheet" type="text/css" href="js/extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="js/extjs/ext-all-debug.js"></script>
<script type="text/javascript" src="app/app.js"></script>
</head>
<body></body>
</html>


The problem with having to use the full path name in the reference to the stores is that I can't use getters and setters like getTestStore() -- and the fact that all the examples show this as possible causes concern that there is something fundamentally wrong that should be fixed before further development of the app.

Has anyone else encountered this problem or can you suggest the best way to address or explain why it is happening?

Thanks.

slemmon
10 Apr 2013, 6:18 AM
Everything looks pretty normal to me compared to apps I've put together in the past. The only thing that stands out to me is the paths config. What happens if you comment out the paths config in your Ext.Loader?

The last couple of apps I put together I used Sencha Cmd (http://www.sencha.com/products/sencha-cmd/download) to build the application framework for me and then I just start replacing / filling-in the app parts and pieces from there. Just something to consider for any future builds.

dakhaj
10 Apr 2013, 11:12 AM
Thank you -removing the paths config cleared up the errors.