I'm trying to build a very very basic "proof of concept" app using ExtJS but i'm having a very hard time.
All i want is two grids getting their data from a remote JSON file, but no matter what i do i keep on getting the error that's in the subject.
Here is my simple code:
app.js:
Ext.Loader.setConfig({enabled:true});
Ext.application({
name: 'GeoSniffer',
autoCreateViewport: true,
models: ['Location', 'Client'],
stores: ['Locations', 'Clients'],
});
Viewport.js
Ext.define('GeoSniffer.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'fit',
requires: [
'GeoSniffer.view.ClientsList',
'GeoSniffer.view.LocationsList'
],
initComponent: function() {
this.items = {
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
width: 250,
xtype: 'panel',
id: 'west-region',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'locationslist',
flex: 1
},{
xtype: 'clientslist',
flex: 1
}]
}]
};
this.callParent();
}
});
Client.js:
Ext.define('GeoSniffer.model.client', {
extend: 'Ext.data.Model',
fields: [
'ip',
'packetsCount',
'firstPacketUsec',
'latestPacketUsec',
'location',
'sessionsArr',
'currentSession'
]
});
Location.js:
Ext.define('GeoSniffer.model.Location', {
extend: 'Ext.data.Model',
fields: [
'countryCode',
'countryName',
'region',
'city',
'postalCode',
'latitude',
'longitude',
'dma_code',
'area_code',
'metro_code',
'packetsCount',
'sessionsArr',
'currentSession',
'clients'
]
});
Clients.js:
Ext.define('GeoSniffer.store.Clients', {
extend: 'Ext.data.Store',
requires: 'GeoSniffer.model.Client',
model: 'GeoSniffer.model.Client',
autoLoad: false,
proxy: {
type: 'ajax',
url: 'data/clients.json',
reader: {
type: 'json',
root: 'clients_list'
}
}
});
Locations.js:
Ext.define('GeoSniffer.store.Locations', {
extend: 'Ext.data.Store',
requires: 'GeoSniffer.model.Location',
model: 'GeoSniffer.model.Location',
autoLoad: false,
proxy: {
type: 'ajax',
url: 'data/locations.json',
reader: {
type: 'json',
root: 'locations_list'
}
}
});
ClientsList.js:
Ext.define('GeoSbiffer.view.ClientsList', {
extend: 'Ext.grid.Panel',
alias: 'widget.clientslist',
store: 'Clients',
title: 'Clients',
hideHeaders: true,
initComponent: function() {
this.columns = [
{
dataIndex: 'ip',
},
{
dataIndex: 'packetsCount',
}
];
this.callParent();
}
});
LocationsList.js:
Ext.define('GeoSbiffer.view.LocationsList', {
extend: 'Ext.grid.Panel',
alias: 'widget.locationslist',
store: 'Locations',
title: 'Locations',
hideHeaders: true,
initComponent: function() {
this.columns = [{
dataIndex: 'countryName',
flex: 1
},{
dataIndex: 'city',
flex: 1
}
];
this.callParent();
}
});
clients.json
{
"sessions_arr": [ 7, 0, 6, 1, 6, 8, 2, 39, 0, 5, 12, 8],
"clients_list": [
{
"ip": "82.166.201.153",
"packetsCount": 1,
"firstPacketUsec": 211474,
"latestPacketUsec": 211474,
"location": {
"countryCode": "IL",
"countryName": "Israel",
"region": "unknown",
"city": "unknown",
"latitude": 31.5,
"longitude": 34.75,
"dma_code": 0,
"area_code": 0,
"metro_code": 0,
"packetsCount": 0,
"currentSession": 0,
"clients": []
},
"sessionsArr": [1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"currentSession": 1
}
],
"status": {
"executionResult": "OK",
"isSnifferActive": false,
"servletInfo": ""
}
}
locations.json
{
"sessions_arr": [ 7, 0, 6, 1, 6, 8, 2, 39, 0, 5, 12, 8],
"locations_list": [
{
"countryCode": "US",
"countryName": "United States",
"region": "CA",
"city": "Palo Alto",
"postalCode": "94304",
"latitude": 37.376205,
"longitude": -122.1826,
"dma_code": 807,
"area_code": 650,
"metro_code": 807,
"packetsCount": 2,
"sessionsArr": [ 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"currentSession": 0,
"clients": [
{
"ip": "69.171.242.14",
"packetsCount": 2,
"firstPacketUsec": 368942,
"latestPacketUsec": 369060,
"sessionsArr": [ 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
"currentSession": 0
}
]
}
],
"status": {
"executionResult": "OK",
"isSnifferActive": false,
"servletInfo": ""
}
}
trying to debug with Firebug through the stack trace gave no helpful info.
What am i missing??
The place the code fails:
I reporoduced this error and I've found out that
GeoSniffer.store.Clients
because you've got typo in yourclient.js
file. There isGeoSniffer.model.client
instead ofGeoSniffer.model.Client
. There is alsoGeoSbiffer
namespace used in *List files.When using the loader, make sure you are running with
ext-all-dev.js
(orext-dev.js
) not-debug
.-dev
will report loader errors, but-debug
will not. This type of problem is a pain to track down as the application grows, but dev will report it right away (in your console).I have only seen this tidbit mentioned once, but it has saved me days of debugging.