Hybrid View

  1. #1
    Ext User
    Join Date
    Jan 2008
    Posts
    39
    Vote Rating
    0
    GTCulbreth is on a distinguished road

      0  

    Default Problem Loading JSON Store

    Problem Loading JSON Store


    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.
    Code:
     
    //=====================================================
            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:
    Code:
     
    {"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:
    Code:
     
        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

  2. #2
    Ext User cerad's Avatar
    Join Date
    Dec 2007
    Posts
    226
    Vote Rating
    0
    cerad is on a distinguished road

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    Jan 2008
    Posts
    39
    Vote Rating
    0
    GTCulbreth is on a distinguished road

      0  

    Default


    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

  4. #4

  5. #5
    Ext User
    Join Date
    Jan 2008
    Posts
    39
    Vote Rating
    0
    GTCulbreth is on a distinguished road

      0  

    Default


    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

    Code:
    //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:
    Code:
    {"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.

  6. #6
    Ext User cerad's Avatar
    Join Date
    Dec 2007
    Posts
    226
    Vote Rating
    0
    cerad is on a distinguished road

      0  

    Default


    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.
    PHP Code:
        var logGridStore = new Ext.data.JsonStore({
            
    urlapp.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.