Hi all,
I have tried many times and solutions for this but I've always encountered the same issue : "Uncaught TypeError: Object [object Object] has no method 'getRoot" while "Ext.define.updateStore" is executed in all-debug.js
I have attached the zip wtih all files and I've copy paste all my code here. If someone has an idea or could test it, it will really be nice. I'm trying for hours now and gonna be mad
index.html
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Getting Started</title>
<link rel="stylesheet" href="../resources/css/sencha-touch.css" type="text/css">
<script type="text/javascript" src="../sencha-touch-all-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<!-- hack so window opening works on all devices: http://www.sencha.com/forum/showthread.php?130358-window.open()-from-toolbar-button-opens-window-from-list-item-a-new-tab&p=639938#post639938 -->
<a href="" target="_blank" id="linker" style="display:none;"></a>
</body>
</html>
app.js
Code:
Ext.Loader.setConfig({ enabled: true });
//Ext.Loader.setPath('Ext.data.proxy.Kiva', 'lib/KivaProxy.js');');
//Ext.ClassManager.setAlias('Ext.data.proxy.Kiva', 'proxy.kiva');
Ext.application({
name : 'Webshop',
models : ['Category'],
views : ['Main'],
stores : ['Categories'],
controllers : ['Main'],
launch: function() {
Ext.create('Webshop.view.Main');
}
});
app/controller/Main.js
Code:
// Ext.Webshop.Catalog controller
Ext.define('Webshop.controller.Main', {
extend: 'Ext.app.Controller',
requires: [
'Webshop.model.Category',
'Webshop.store.Categories',
'Webshop.view.Main'
],
stores: ['Categories'],
models: ['Category'],
views: [
'Main'
],
init: function() {
this.view = this.getMainView().create();
this.categoriesStore = this.getCategoriesStore();
this.categoriesStore.load({
callback: this.onCategoriesLoad,
scope: this
});
this.callParent(arguments);
},
onCategoriesLoad: function() {
this.view.setStore(this.categoriesStore);
}
});
app/view/Main.js
Code:
Ext.define('Webshop.view.Main', {
extend: 'Ext.NestedList',
config : {
layout:'fit',
fullscreen: true,
displayField: 'text',
store: null,
title: 'Catalogue'
}
});
app/store/Categories.js
Code:
Ext.define('Webshop.store.Categories', {
extend: 'Ext.data.Store',
requires: 'Webshop.model.Category',
config: {
model: 'Webshop.model.Category',
autoLoad: false
},
root: {}
});
app/model/Category.js
Code:
Ext.define('Webshop.model.Category', {
extend: 'Ext.data.Model',
config: {
fields: ['iItemId', 'text' ],
proxy: {
type: 'ajax',
url: 'catalogcategory.json',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}
});
catalogcategory.json
Code:
{
"items": [
{
"iItemId": 1,
"text": "Plomberie",
"image": "plomberie-little.png",
"items" : [
{
"iItemId": 11,
"text": "Plomberie > Outillage",
"image": "outillage-little.png",
"items" : [{
"iItemId": 111,
"text": "Plomberie > Outillage",
"image": "outillage-little.png",
"leaf": true
},
{
"iItemId": 112,
"text": "Plomberie > Outillage",
"image": "outillage-little.png",
"leaf": true
}],
},
{
"iItemId": 12,
"text": "Plomberie > Sanitaire",
"image": "outillage-little.png",
"items" : [{
"iItemId": 121,
"text": "Plomberie > Outillage",
"image": "outillage-little.png",
"leaf": true
},
{
"iItemId": 122,
"text": "Plomberie > Outillage",
"image": "outillage-little.png",
"leaf": true
}]
}]
},
{
"iItemId": 2,
"text": "Outillage",
"image": "outillage-little.png",
"leaf": true
},
{
"iItemId": 3,
"text": "Sanitaire",
"image": "sanitaire-little.png",
"leaf": true
},
{
"iItemId": 4,
"text": "Confort thermique",
"image": "thermique-little.png",
"leaf": true
}
]
}
Archive.zip