PDA

View Full Version : JSON not loading / EXT JS 4.2.1



rajuarien
4 Oct 2013, 11:54 AM
App.js
Attaching a screenshot of my folder structure. Its not even making a call to the JSON file since i dont see in the network tab of the browser.

Ext.application({
name: 'wl',
appFolder: '/app',
requires: ['Ext.container.Viewport'],
launch: function () {
if (typeof console != "undefined") {
console.log('App is launched');
var store = Ext.getStore('employeeStore'); //Always comes as undefined no errors seen in F12
if (store != null)
console.log(store.data.items[0].data);
}
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: {
title: 'Employee list'
}
});
}
})

//EmployeeStore.js
Ext.define('wl.store.EmployeeStore', {
extend: 'Ext.data.Store',
model: 'wl.model.Employee',
storeId: 'employeeStore',

autoload: true,
proxy: {
type: 'ajax',
url: '/data/employeeData.json',
reader: {
type: 'json',
root: 'employees'
},
listeners: {
exception: function (proxy, response, operation) {
if (operation) {
if (typeof console != "undefined") {
console.log(operation.error);
}
} else {
if (typeof console != "undefined") {
console.log(operation.error);
}
}
}
}
}
})

//Employee.js
Ext.define('wl.model.Employee', {
extend: 'Ext.data.Model',
fields: ['id', 'name', 'email']
})

//Index.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title id="page-title">hello</title>

<link rel="stylesheet" type="text/css" href="/extjs/resources/css/ext-all-gray.css">
<script type="text/javascript" src="/extjs/ext-debug.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>

Gary Schlosberg
4 Oct 2013, 3:31 PM
What does your /data/employeeData.json look like?

rajuarien
4 Oct 2013, 7:21 PM
{
employees: [
{id: 1, name: 'Employee1', email: 'Employee1@abc.com'},
{id: 2, name: 'Employee2', email: 'Employee2@abc.com'},
{id: 3, name: 'Employee3', email: 'Employee3@abc.com'},
{id: 4, name: 'Employee4', email: 'Employee4@abc.com'},
{id: 5, name: 'Employee5', email: 'Employee5@abc.com'},
{id: 6, name: 'Employee6', email: 'Employee6@abc.com'},
{id: 7, name: 'Employee7', email: 'Employee7@abc.com'},
{id: 8, name: 'Employee8', email: 'Employee8@abc.com'}
]
}

Orcyano
6 Oct 2013, 5:35 AM
Your store is defined after your application is created, that's why it is undefined.

rajuarien
8 Oct 2013, 8:36 PM
thanks