Ext JS Gotcha’s

Sencha Ext JS is a great framework though like every other technology out there you will encounter gotcha’s leaving you searching for hours only to find the mistake was starting you right in the face.

This was the case using models to define a CRUD application and utilizing the viewmodel to create your stores.

The code below indicates two viewmodels and two models. One was implemented using the classic toolkit while the other was implemented with the modern toolkit.

Modern toolkit code.

Ext.define('ezWeb360Mobile.model.empbasicinfomodel', {
    extend: 'Ext.data.Model',


    fields: [
        { name: 'id', type: 'int' },
        { name: 'firstName', type: 'string' },
        { name: 'lastName', type: 'string' },
        { name: 'address1', type: 'string' },
        { name: 'address2', type: 'string' },
        { name: 'city', type: 'string' },
        { name: 'state', type: 'string' },
        { name: 'zipCode', type: 'string' },
        { name: 'homePhone', type: 'string' },
        { name: 'workPhone', type: 'string' }
    ],


    proxy: [{
        type: 'ajax',
        api: {
            read: '/dev_andy003/ezWeb360Mobile/resources/mobileTData.aspx?method=getBasicInfo',
            create: '',
            update: '',
            destroy: ''
        },
        writer: {
            type: 'json',
            writeAllFields: true
        },
        reader: {
            rootProperty: 'data',
            type: 'json'
        },
    }]
});

Modern toolkit viewmodel

Ext.define('ezWeb360Mobile.view.employee.myinformation.EmployeeBasicInfoModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.employee-myinformation-employeebasicinfo',
    data: {
        name: 'ezWeb360Mobile'
    },


    stores: {
        basicInfoStore: {
            model: 'ezWeb360Mobile.model.basicinfoempmodel',
            autoLoad: true
        }
    }
});

The modern toolkit is what wasn’t working.

Now the problem comes in no errors were being reported with the above code. CMD complied it without errors. Running sencha app watch generated no errors. When opening this in the browser you would get a 404 error as the https://url/empbasicinfomodel?_dc=… When what should be opening was https://url/dev_andy003/ezWeb360Mobile/app/model/empbasicinfomodel.js?_dc=….

Now without errors and as programmers how quickly we are to overlook the simple aspects in our code. Simple is what this problem turned into as it was extremely basic to solve once you think about.

The code below is from the classic version that was working as expected. The model code

Ext.define('ajlfantasy.model.playermodel', {
    extend: 'Ext.data.Model',


    fields: [
        { name: 'id', type: 'int' },
        { name: 'esbid', type: 'string' },
        { name: 'gsisPlayerId', type: 'string' },
        { name: 'nflPlayerId', type: 'int' },
        { name: 'teamId', type: 'int' },
        { name: 'firstName', type: 'string' },
        { name: 'lastName', type: 'string' },
        { name: 'jerseyNum', type: 'int' },
        { name: 'position', type: 'string' },
        { name: 'height', type: 'string' },
        { name: 'weight', type: 'int' },
        { name: 'age', type: 'int' },
        { name: 'exp', type: 'int' },
        { name: 'college', type: 'string' },
        { name: 'yrentered', type: 'int' },
        { name: 'yearadded', type: 'int' },
        { name: 'yearremoved', type: 'int' },
        { name: 'teamstatus', type: 'int' },
        { name: 'injured', type: 'int' },
        { name: 'injurylength', type: 'string' },
        { name: 'ir', type: 'int' },
        { name: 'practicesquad', type: 'int' },
        { name: 'suspended', type: 'int' },
        { name: 'returnsuspenddate', type: 'date' },
        { name: 'depthchart', type: 'int' },
        { name: 'lineside', type: 'string' }
    ],


    proxy: {
        type: 'ajax',
        api: {
            read: '/resources/players.php?method=getTeamRoster',
            create: '',
            update: '',
            destroy: ''
        },
        writer: {
            type: 'json',
            writeAllFields: true
        },
        reader: {
            type: 'json',
            rootProperty: 'players'
        }
    }
});

There is no need to show the viewmodel in this case as the error is in the model definition. In the version that wasn’t working you find the proxy is being defined as an array. In the version that is working the proxy is defined as an object. Proxies are objects, not arrays.

The debugging in Ext JS didn’t give an error of receiving an array when an object is expected. The error was passed to the browser where a 404 was returned. Everything else in the code returned the correct url.

So Sencha is returning just the last part of the naming convention used and then sending that to the browser.

It is good to know things like this happen. Ext JS is a big framework and it can’t be expected to catch everything we as programmers can throw at it. We as programmers can share these simple issues we create to help others debug these when they create them and don’t realize how simple the mistake is.

As I said to a co-worker today, I believe 80% of my debugging time is spent chasing down these foolish mistakes, spending time looking for deeper issues than the simple ones we are all guilty of.

I did post this to Sencha support. So far the only response I received was

“I request you to show the issue in fiddle to assist you in a better way.”

Now I won’t mention names, I won’t place blame or even be upset. But the bug was found, even though my coding error, in the development of a PWA. It is NOT always so simple to “show the issue in a fiddle” as it would involve causing CORS errors as it would be cross domain. It would further take me a couple hours to create a fiddle. I shouldn’t have to spend hours to generate a fiddle when seeking support. It kind of defeats the purpose and need for support.

Again, Sencha Ext JS is a great framework and I use it extensively. Articles like this are intended to help everyone, including Sencha. Other coders can see traps we’ve been caught in and help reduce their time solving it. Sencha can learn in some cases a fiddle shouldn’t be the first line of defense.

Even in the case the problem is as simple as I pointed out, Sencha support had the above information and more. Even if they point out the stupid mistake I made they will get paid through my support subscription and I will be thankful because that direct observation was another set of eyes and could have saved me hours chasing my foolishness and my tail.

Author: aallord

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.