Can't resolve “c is not a constructor” error

Question

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:

Answer 1

When using the loader, make sure you are running with ext-all-dev.js (or ext-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.

Answer 2

I reporoduced this error and I've found out that GeoSniffer.store.Clients because you've got typo in your client.js file. There is GeoSniffer.model.client instead of GeoSniffer.model.Client. There is also GeoSbiffer namespace used in *List files.