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.

  7. #7
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,963
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    store.on('loadexception'... might be enlightening as well.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


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

      0  

    Default


    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

  9. #9
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,963
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    @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.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


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

      0  

    Default


    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.