How to traceback debug the ext-all-debug.js returned error

Question

Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '/ux');
Ext.require([
    'Ext.tip.QuickTipManager',
    'Ext.menu.*',
    'Ext.form.field.ComboBox',
    'Ext.layout.container.Table',
    'Ext.container.ButtonGroup',
    'Ext.form.FieldSet',
    'Ext.data.*',
    'Ext.form.*'
]);
Ext.onReady(function() {
    Ext.QuickTips.init(); //tips box


Ext.define('MyApp.view.MyContainer13', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.myroutegridpanel',

    width:  window.innerWidth,
    header: false,
    height: window.innerHeight,
    //renderTo: Ext.getBody(), //cannot put in everywhere, if not this panel will full screen, can't see other already
    layout: {
        align: 'stretch',
        type: 'hbox'
    },

            items: [
                {
                    xtype: 'container',
                    flex: 1,
                    //maxWidth: window.innerWidth/3,
                    items: [
                        {
                             //xtype: 'mygridpanelroutename'
                            xtype: 'myroutegridpanel1'

                        }
                    ]
                }
            ]


});

// THIS IS THE PART I ADD IN, THEN ERROR OCCUR, until below ,please check my remark

Ext.create('Ext.window.Window', {
    alias: 'widget.myroutegridpanel1',
    width: 400,
    height: 400,
    title: 'Example of Dynamic Grid',
    layout: 'fit',
    items: [
        {
            // All what you have to set! :)
            xtype: 'dynamicGrid',
            url: 'route/get-routefare.php'
        }
    ]
});

Ext.define('Ext.ux.grid.DynamicGrid', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.dynamicGrid',
    alternateClassName: 'Ext.grid.DynamicGrid',
    // URL used for request to the server. Required
    url: '',

    initComponent: function() {
        var me = this;

        if (me.url == '') {
            Ext.Error.raise('url parameter is empty! You have to set proper url to get data form server.');
        }
        else {
            Ext.applyIf(me, {
                columns: [],
                forceFit: true,
                store: Ext.create('Ext.data.Store', {
                    // Fields have to be set as empty array. Without this Ext will not create dynamic model.
                    fields: [],
                    // After loading data grid have to reconfigure columns with dynamic created columns
                    // in Ext.ux.data.reader.DynamicReader
                    listeners: {
                        'metachange': function(store, meta) {
                            me.reconfigure(store, meta.columns);
                        }
                    },
                    autoLoad: true,
                    remoteSort: false,
                    remoteFilter: false,
                    remoteGroup: false,
                    proxy: {
                        reader: 'dynamicReader',
                        type: 'rest',
                        url: me.url
                    }
                })
            });
        }

        me.callParent(arguments);
    }
});

Ext.apply(Ext.data.Types, {
    FLOATORSTRING: {
        convert: function(v, n) {
            v = Ext.isNumeric(v) ? Number(v) : v;
            return v;
        },
        sortType: function(v) {
            v = Ext.isNumeric(v) ? Number(v) : v;
            return v;
        },
        type: 'floatOrString'
    }
});

Ext.define('Ext.ux.data.reader.DynamicReader', {
    extend: 'Ext.data.reader.Json',
    alias: 'reader.dynamicReader',
    alternateClassName: 'Ext.data.reader.DynamicReader',

    readRecords: function(data) {
        if (data.length > 0) {
            var item = data[0];
            var fields = new Array();
            var columns = new Array();
            var p;

            for (p in item) {
                if (p && p != undefined) {
                    // floatOrString type is only an option
                    // You can make your own data type for more complex situations
                    // or set it just to 'string'
                    fields.push({name: p, type: 'floatOrString'});
                    columns.push({text: p, dataIndex: p});
                }
            }


            data.metaData = { fields: fields, columns: columns };
        }

        return this.callParent([data]);
    }
});
 // UNTIL HERE, THOSE CODE AFTER ADDED, then returned ERROR in the picture below

}); // on ready

You can see the code i have comment where i have added the code then the error occur, however, i would like to learn how to traceback the error come from, unfortunately, ext-all-debug.js only display those simple error comment, how to trace where is the error come from?

Answer 1

There are a couple things you can do

reference the ext-dev.js instead. The difference has to to do with the differences between the two files. The ext-debug.js file contains all the supporting javascript uploaded at once. The ext-dev.js file contains only the core files and need to load the supporting ones as needed. We get much more informative errors this way. In this case the alias is not recognized.

Second, use Chrome tools and right click and choose Inspect Element. You can see the actual line where the code fails in the sources tab by clicking twice on the pause button on the upper right corner of the developer tools area. It will turn purple. Screen below shows how we now see the line of code that fails highlighted