Problem Loading JSON Store

[GTCulbreth]

Hi All,
I am trying to load a data store from json data and get an error "this.proxy has no properties"

I am getting the data from the server it just won't load the store.

This is my Ajax code and the data is retrieved from the server.

 
//=====================================================
        Ext.Ajax.request(
            {
                url: '/TOA/GetDisasterDataListAction.do',
                success: function(result, request) {
                    da = result.responseText;
                    alert("Success: "+da);
                    alert("da: "+da);
                    var json = Ext.decode(da);
                    toadata.loadDisasterData(json);
                    disasterGrid.syncSize();
                },
                failure: function(result, request) {
                    alert("Failure: "+result.responseText)
                },
                headers: 
                {
                    'my-header': 'Data Transfer'
                }
                //params: { ?: '?' }
            });
 
//=====================================================

The data looks like this:

 
{"d":[
    {"inc_epd":"10/01/2007","dstr_id":2,"prj_o":"","inc_spd":"09/14/2007","tsk_m":"BUTCH, DAVID ","dstr_dcs":"","isc":"HIGGS, BILLY ","dec_dt":"09/16/2007","prj_h":"TOYER, BILL ","dstr_n":"DISASTER","spc_con":"","aff_reg":"7","cotr":"","cont_o":"","st":"KANSAS","dstr_fy":2007},
    {"inc_epd":"10/25/2007","dstr_id":3,"prj_o":"","inc_spd":"10/09/2007","tsk_m":"TOYER, BILL ","dstr_dcs":"","isc":"COPE, BARBARA ","dec_dt":"10/11/2007","prj_h":"HICKMAN, DAVID ","dstr_n":"DISASTER","spc_con":"","aff_reg":"7","cotr":"","cont_o":"","st":"MISSOURI","dstr_fy":2007},
    {"inc_epd":"09/30/2007","dstr_id":4,"prj_o":"","inc_spd":"09/10/2007","tsk_m":"TOYER, BILL ","dstr_dcs":"","isc":"LONG, JACOB ","dec_dt":"09/18/2007","prj_h":"TOYER, BILL ","dstr_n":"DISASTER","spc_con":"","aff_reg":"7","cotr":"","cont_o":"","st":"NEBRASKA","dstr_fy":2007},
    {"inc_epd":"09/30/2007","dstr_id":5,"prj_o":"","inc_spd":"09/10/2007","tsk_m":"TOYER, BILL ","dstr_dcs":"","isc":"LONG, JACOB ","dec_dt":"09/18/2007","prj_h":"TOYER, BILL ","dstr_n":"DISASTER","spc_con":"","aff_reg":"","cotr":"","cont_o":"","st":"","dstr_fy":2007}
    ],
 "totalCount":4}

And here is my data store set-up:

 
    var jDisasterReader = new Ext.data.JsonReader(
                        {
                            totalProperty: 'totalCount',
                            root:'d',
                            id: 'dr.disaster_id'
                        },
                        disasterListRec
                      );
    var disasterListRec = new Ext.data.Record.create([
                                {name: 'dr.disaster_id',                      mapping: 'dstr_id',  type: 'int'} 
                               ,{name: 'dr.disaster_number',                  mapping: 'dstr_n',   type: 'string'} 
                               ,{name: 'dr.project_head',                     mapping: 'prj_h',    type: 'string'} 
                               ,{name: 'dr.project_officer',                  mapping: 'prj_o',    type: 'string'} 
                               ,{name: 'dr.cotr',                             mapping: 'cotr',     type: 'string'} 
                               ,{name: 'dr.contracting_officer',              mapping: 'cont_o',   type: 'string'} 
                               ,{name: 'dr.task_monitor',                     mapping: 'tsk_m',    type: 'string'} 
                               ,{name: 'dr.inspection_services_coordinator',  mapping: 'isc',      type: 'string'} 
                               ,{name: 'dr.incident_period_start',            mapping: 'inc_spd',  type: 'string'} 
                               ,{name: 'dr.incident_period_end',              mapping: 'inc_epd',  type: 'string'} 
                               ,{name: 'dr.declaration_date',                 mapping: 'dec_dt',   type: 'date', dateFormat: 'm/d/Y'}
                               ,{name: 'dr.state',                            mapping: 'st',       type: 'string'} 
                               ,{name: 'dr.disaster_fiscal_year',             mapping: 'dstr_fy',  type: 'int'} 
                               ,{name: 'dr.disaster_description',             mapping: 'dstr_dsc', type: 'string'} 
                               ,{name: 'dr.affected_region',                  mapping: 'aff_reg',  type: 'string'} 
                               ,{name: 'dr.special_conditions',               mapping: 'spc_con',  type: 'string'}
                              ]);
    var disasterReader = new Ext.data.ArrayReader({}, disasterListRec);
 
    var disasterColumnModel = new Ext.grid.ColumnModel(
                              [
                                new Ext.grid.RowNumberer(),
                                {id:'dr.disaster_key', header: "Disaster Key", width: 20, sortable: true, dataIndex: 'dr.disaster_key'     ,hidden: true}
                               ,{header: 'Disaster Number'      ,width: 40, sortable: true, dataIndex: 'dr.disaster_number'                } 
                               ,{header: 'Project Head'         ,width: 20, sortable: true, dataIndex: 'dr.project_head'                   } 
                               ,{header: 'Project Officer'      ,width: 20, sortable: true, dataIndex: 'dr.project_officer'                } 
                               ,{header: 'COTR'                 ,width: 20, sortable: true, dataIndex: 'dr.cotr'                           } 
                               ,{header: 'Contracting Officer'  ,width: 20, sortable: true, dataIndex: 'dr.ontracting_officer'             } 
                               ,{header: 'Task Monitor'         ,width: 20, sortable: true, dataIndex: 'dr.task_monitor'                   } 
                               ,{header: 'Insp. Srvc. Coord.'   ,width: 20, sortable: true, dataIndex: 'dr.inspection_services_coordinator'} 
                               ,{header: 'Incident Period Start',width: 20, sortable: true, dataIndex: 'dr.incident_period_start'          } 
                               ,{header: 'Incident Period End'  ,width: 20, sortable: true, dataIndex: 'dr.incident_period_end'            } 
                               ,{header: 'Declr. Date'          ,width: 15, sortable: true, dataIndex: 'dr.declaration_date'               ,renderer: Ext.util.Format.dateRenderer('m/d/Y')}
                               ,{header: 'State'                ,width: 20, sortable: true, dataIndex: 'dr.state'                          } 
                               ,{header: 'Dstr FY'              ,width: 10, sortable: true, dataIndex: 'dr.disaster_fiscal_year'           } 
                               ,{header: 'Disaster Description' ,width: 50, sortable: false, dataIndex:'dr.disaster_description'           ,hidden: true} 
                               ,{header: 'Affected Regions'     ,width: 50, sortable: true, dataIndex: 'dr.affected_region'                ,hidden: true} 
                               ,{header: 'Special Conditions'   ,width: 50, sortable: true, dataIndex: 'dr.special_conditions'             ,hidden: true}
                              ]);
    var disasterStore = new Ext.data.Store(
                        {
                            reader: jDisasterReader,
                            //reader: disasterReader,
                            listeners: {
                               loadexception: function(proxy, store, response, e) {
                                    alert(e.message);
                               }
                            }
                        });
    
    /*---- DISASTER DATA METHODS----------------------------------------------*/
    this.loadDisasterData = function (data) {
        alert("loadDiasaterData: "+ data);
        disasterStore.load(data);
        alert("loadDiasaterData: "+ disasterStore.getById("disasterNumber"));
    }

Can anyone please help.
TC

[cerad]

Why are you using a Request object? I'd suggest just using a JsonStore object. Documentation has a good example.

It looks like you are trying to pass the json data to the store.load method. Thats not going to do what you want.

[GTCulbreth]

Hi cerad,

You are correct I was originally using loadData to load the data. I used the store to load a grid and it was working with hard coded data but when I changed to use the server data thing did not go so well. I am fairly handicapped because I am new to Ext, JSON, and Ajax. I used an example that was posted elsewhere on this site. Could you provide a few examples or point me to some. I did checkout your site and hope it will help.

Thanks

[cerad]

http://extjs.com/deploy/dev/docs/?cl...data.JsonStore

[GTCulbreth]

I have tried using the JSON example and I still get no data being loaded. Here is my code now and it is using the JsonStore to get the data.

I thank you for taking the time to look at this as my deadline is growing near. Thanks.

The Grid at the bottom of the code uses the jsonStore

//Ext.onReady(function(){ 
var Toa = {
    Application: function () {},
    Data: function () {},
    data: function () {},
    Disaster: function () {}
};
Toa.Application = new function() 
{

    var logger = Core.Logger.getLogger('TOA');
    logger.debug('[toajs]: in the onReady');

//============================================================================
//  When looking at the code start with the grid at the bottom
//
//
//============================================================================

    //-------TAB START -------------------------------------------------------------

    //==========================================================================
    // Disaster Tab Panel
    //==========================================================================
    this.init = function () { 
        var mainTabs = new Ext.TabPanel(
        {
            id: 'toa-tabs',
            region: 'center',
            deferredRender:false,
            activeTab:0,
            items:[{
                id: 'disaster-tab',
                item: Toa.Disaster.grid(),
                title: 'Disaster List',
                closable:false,
                autoScroll:true,
                listeners: {
                    'activate': fireActivate
                },
                isLoaded: false
            },{
                id: '40-1-tab',
                html: 'fortyDashOneGrid',
                title: ' 40-1 ',
                autoScroll:true,
                listeners: {
                    'activate': fireActivate
                },
                isLoaded: false
            },{
                id: 'task-order-tab',
                html:'<b>center2</b>',
                title: 'Task Orders',
                autoScroll:true,
                listeners: {
                    'activate': fireActivate
                },
                isLoaded: false
            },{
                id: 'invioces-tab',
                html:'<b>center3</b>',
                title: 'Invoices',
                autoScroll:true
            },{
                id: 'funding-summary-tab',
                html:'<b>center4</b>',
                title: 'Funding Summary',
                autoScroll:true
            }],
            tbar: Toa.Data.tabActions(),  
            viewConfig: {
                //forceFit:true  // forces the columns to fit the window
                autoFill:true
            },
            //autoWidth: true,
            renderTo: 'main-display',
            height:500
        });

        function fireActivate (p)
        {
            //disasterGrid.syncSize();
            if (p.id == '40-1-tab') {
                //fortyDashOneGrid.syncSize();
            }
            if (!p.isLoaded)
            {
                //alert ('loading panel: ' + p.id);
                p.isLoaded = true;
                if (p.id == '40-1-tab') {
                    mainTabs.getItem('disaster-tab').isLoaded = false;
                }
            }
        };
    };
//-------TAB END ---------------------------------------------------------------
};  

Toa.Data = new function() {
    this.tabActions = function() {
            // Define Actions
        var newAction = new Ext.Action ({
            id:'new-rec',
            text: '<b>New</b>',
            handler: function () {alert("NEW");},
            scope: this
        });
        var editAction = new Ext.Action ({
            id:'edit-rec',
            text: '<b>Edit</b>',
            handler: function () {alert("EDIT");},
            scope: this
        });
        var refreshAction = new Ext.Action({
            id:'refresh-rec',
            text: '<b>Refresh</b>',
            handler: function () {alert("REFRESH");},
            scope: this
        });
        var tabButtons = [];
        tabButtons.push (new Ext.Button (newAction));
        tabButtons.push (new Ext.Button (editAction));
        tabButtons.push (new Ext.Button (refreshAction));
        return tabButtons;
    };
};
Toa.Disaster = new function() {

    this.init = function () {
        alert("in Toa.Disaster");
        return 'DDIISSAASSTTEERR';
    };
    var disasterListRec = new Ext.data.Record.create([
            {name: 'dr.disaster_id',                      mapping: 'dstr_id',  type: 'int'} 
           ,{name: 'dr.disaster_number',                  mapping: 'dstr_n',   type: 'string'} 
           ,{name: 'dr.project_head',                     mapping: 'prj_h',    type: 'string'} 
           ,{name: 'dr.project_officer',                  mapping: 'prj_o',    type: 'string'} 
           ,{name: 'dr.cotr',                             mapping: 'cotr',     type: 'string'} 
           ,{name: 'dr.contracting_officer',              mapping: 'cont_o',   type: 'string'} 
           ,{name: 'dr.task_monitor',                     mapping: 'tsk_m',    type: 'string'} 
           ,{name: 'dr.inspection_services_coordinator',  mapping: 'isc',      type: 'string'} 
           ,{name: 'dr.incident_period_start',            mapping: 'inc_spd',  type: 'string'} 
           ,{name: 'dr.incident_period_end',              mapping: 'inc_epd',  type: 'string'} 
           ,{name: 'dr.declaration_date',                 mapping: 'dec_dt',   type: 'date', dateFormat: 'm/d/Y'}
           ,{name: 'dr.state',                            mapping: 'st',       type: 'string'} 
           ,{name: 'dr.disaster_fiscal_year',             mapping: 'dstr_fy',  type: 'int'} 
           ,{name: 'dr.disaster_description',             mapping: 'dstr_dsc', type: 'string'} 
           ,{name: 'dr.affected_region',                  mapping: 'aff_reg',  type: 'string'} 
           ,{name: 'dr.special_conditions',               mapping: 'spc_con',  type: 'string'}
          ]);
    var disasterColumnModel = new Ext.grid.ColumnModel(
          [
            new Ext.grid.RowNumberer(),
            {id:'dr.disaster_key', header: "Disaster Key", width: 20, sortable: true, dataIndex: 'dr.disaster_key'     ,hidden: true}
           ,{header: 'Disaster Number'      ,width: 40, sortable: true, dataIndex: 'dr.disaster_number'                } 
           ,{header: 'Project Head'         ,width: 20, sortable: true, dataIndex: 'dr.project_head'                   } 
           ,{header: 'Project Officer'      ,width: 20, sortable: true, dataIndex: 'dr.project_officer'                } 
           ,{header: 'COTR'                 ,width: 20, sortable: true, dataIndex: 'dr.cotr'                           } 
           ,{header: 'Contracting Officer'  ,width: 20, sortable: true, dataIndex: 'dr.ontracting_officer'             } 
           ,{header: 'Task Monitor'         ,width: 20, sortable: true, dataIndex: 'dr.task_monitor'                   } 
           ,{header: 'Insp. Srvc. Coord.'   ,width: 20, sortable: true, dataIndex: 'dr.inspection_services_coordinator'} 
           ,{header: 'Incident Period Start',width: 20, sortable: true, dataIndex: 'dr.incident_period_start'           } 
           ,{header: 'Incident Period End'  ,width: 20, sortable: true, dataIndex: 'dr.incident_period_end'             } 
           ,{header: 'Declr. Date'          ,width: 15, sortable: true, dataIndex: 'dr.declaration_date'               ,renderer: Ext.util.Format.dateRenderer('m/d/Y')}
           ,{header: 'State'                ,width: 20, sortable: true, dataIndex: 'dr.state'                          } 
           ,{header: 'Dstr FY'              ,width: 10, sortable: true, dataIndex: 'dr.disaster_fiscal_year'           } 
           ,{header: 'Disaster Description' ,width: 50, sortable: false, dataIndex:'dr.disaster_description'           ,hidden: true} 
           ,{header: 'Affected Regions'     ,width: 50, sortable: true, dataIndex: 'dr.affected_region'                ,hidden: true} 
           ,{header: 'Special Conditions'   ,width: 50, sortable: true, dataIndex: 'dr.special_conditions'             ,hidden: true}
          ]);

   var jReader = new Ext.data.JsonReader(
                        {
                          totalProperty: 'numRows',
                          root:'rows'
                        },
                        disasterListRec
                      );
   var jStore = new Ext.data.JsonStore({
                    url: '/TOA/GetDisasterDataListAction.do',
                    reader: jReader,
                    autoLoad: true
                }); 
                                                                        
//=========================================================================                                                                        
// This is the grid panel that is to be displayed on the first tab panel   
// the jStore uses the store directly above.
//=========================================================================             
                
                       
    this.grid = function() {
        alert("in Toa.Disaster.grid");
        this.rowSm = new Ext.grid.RowSelectionModel(
        {
            singleSelect:true,
            listeners: {
                'rowselect': function(sm, row, rec) {
                    alert("Row Number: "+row);
                }
            }
        });  
        alert("F");
        var dstrGrid = new Ext.grid.GridPanel(
        {
            store: jStore,
            column: disasterColumnModel,
            sm: this.rowSM,
            viewConfig: {
                //forceFit:true  // forces the columns to fit the window
                autoFill:true
            },
            autoWidth: true,
            height:300,
            //autoHeight:true,
            //renderTo: 'main-display',
            iconCls:'icon-grid',
            listeners:
            {
                render: function(g) {
                    g.getSelectionModel().selectRow(0);
                }
                //delay: 10 // Allow rows to be rendered.
            }
        });

        dstrGrid.on('rowclick', function(grid, rowIndex, e) {
              //var record = grid.getStore().getAt(rowIndex);
              //alert(rowIndex);
        });
        alert("dstrGrid="+ dstrGrid);
        dstrGrid.syncSize;
        return dstrGrid;
    };

};

The data look like:

{"numRows":4,"rows":[{"inc_epd":"10/01/2007","dstr_id":2,"prj_o":"","inc_spd":"09/14/2007","tsk_m":"RITCHIE, DAVID","dstr_dcs":"","isc":"HIGGS, HAROLD","dec_dt":"09/16/2007","prj_h":"BOYER, BILL","dstr_n":"DISASTER","spc_con":"","aff_reg":"7","cotr":"","cont_o":"","st":"KANSAS","dstr_fy":2007},{"inc_epd":"10/25/2007","dstr_id":3,"prj_o":"","inc_spd":"10/09/2007","tsk_m":"BOYER, BILL","dstr_dcs":"","isc":"COPELAND, BARBARA","dec_dt":"10/11/2007","prj_h":"HOCKMAN, MICHAEL","dstr_n":"DISASTER","spc_con":"","aff_reg":"7","cotr":"","cont_o":"","st":"MISSOURI","dstr_fy":2007},{"inc_epd":"09/30/2007","dstr_id":4,"prj_o":"","inc_spd":"09/10/2007","tsk_m":"BOYER, BILL","dstr_dcs":"","isc":"VICKERS, JACOB","dec_dt":"09/18/2007","prj_h":"BOYER, BILL","dstr_n":"DISASTER","spc_con":"","aff_reg":"7","cotr":"","cont_o":"","st":"NEBRASKA","dstr_fy":2007},{"inc_epd":"09/30/2007","dstr_id":5,"prj_o":"","inc_spd":"09/10/2007","tsk_m":"BOYER, BILL","dstr_dcs":"","isc":"VICKERS, JACOB","dec_dt":"09/18/2007","prj_h":"BOYER, BILL","dstr_n":"DISASTER","spc_con":"","aff_reg":"","cotr":"","cont_o":"","st":"","dstr_fy":2007}]}

I cannot see anything wrong with the data and I am too new to Ext and Json to know if something is wrong in the code.

[cerad]

Not seeing anything obviously wrong. I usually just use the fields config option and skip the json reader. I suppose it's possible that the dr. names are causing an issue.

Focus on getting the store loaded. Here is one of my examples.

    var logGridStore = new Ext.data.JsonStore({
        url: app.buildUrl('service/logistics/search'),
        root:   'data',
        fields: [
            'RIN', 'Location', 'PRID', 'HSC', 'Nomenclature', 'FunctionalDesc', 'SerialNum',
            'APL_AEL', 'CAGE', 'WorkCenter', 'ESD', 'QTY', 'Compartment'
          ]
    }); 

Add in a store.on('load',function
Set a break point and see if the store is loaded. Cut everything else out until you can get the store loaded.

[hendricd]

store.on('loadexception'... might be enlightening as well.

[GTCulbreth]

I have added a loadException listener and now get this message:

"A has no properties"

I think this is due to proxy being passed in the loadException function. When I remove the proxy from the arguments the error is

[hendricd]

@GT -- At this stage in your development effort, you should be loading ext-all-debug.js and using a good debugging tool.

'A has no properties' tells me you are not using the debug version.

If you don't have Firebug on Firefox, get it ! If you can't for some reason, use ext-all-debug and:

Ext.dump(e)

You JSON response looks good, except you have some dates (incident dates) in there that aren't declared as dates in you record def or column Model.

[cerad]

And JsonReader does not have a fields config property. You don't need an explicit JsonReader anyways. Just use a JsonStore and check the example in the documentation.

And absolutely install Firebug and Firefox.