Problem Loading JSON Store

[GTCulbreth]

Thanks for the debuging tips. I have installed firebug amd ext-all-debug.js

And for the sake of just getting the data to the store I now only use the store. I will, I think, have to the the reader because that is what associates the records to the grid.

Here is the code I am using now. I get no errors and I cay see no day is loaded, but I can see the data in firebug. Thanks again

It does not seem I am getting a loadException now.

    var dgStore = new Ext.data.JsonStore({
            url: '/TOA/GetDisasterDataListAction.do',
            totalProperty: 'numrows',
            root:'rows',
            fields: 
            [
                'inc_epd', 'dstr_id', 'prj_o', 'inc_spd', 'tsk_m', 'dstr_dcs', 'isc', 'dec_dt', 'prj_h',
                'dstr_n', 'spc_con', 'aff_reg', 'cotr', 'cont_o', 'st', 'dstr_fy' 
            ],
            listeners: {
                loadexception: function(proxy, store, response, e) {
                            alert("Response Text?"+response.responseText);
                            alert("dgStore Message \n"+proxy+"\n"+store+"\n"+response+"\n"+e.message);
			  }
            }
        });
    dgStore.load();

[GTCulbreth]

Hi,

Firebug is really neat. It turns out the I am getting data. I found this out as I was stepping through the js. The data load was not finished before everything else was loaded. The stepping slowed that down.

Now it seems I need to somehow wait for the data to come back before continuing, though this does not seem right.

Thank you so much for you help, I

[fay]

If you look at the docs you'll see that the load() method is asynchronous. You need to add a 'load' event handler to do your required processing when the data is available.

Just spotted that you're using 2.0 - the same applies to it.

[GTCulbreth]

Thanks fay,

I have added a callback function but don't know exactly how to use it. My data is to be loaded to a grid so I think I would do something like grid.syncSize() or grid.hide() and grid.show()

but for now I'm getting a cm (columnCount) has no properties.

[mjlecomte]

What I've found enlightening is to add listeners to the store, proxy, and ajax requests. In the various events, report some message with

console.log('some message here')

You can watch the console tab of Firebug and see when events get triggered, etc.

A grid monitors the associated store's LOAD event. The grid doesn't fill itself with data until after that event fires. You'll see the grid get rendered (presuming you call grid render before store.load() ) and then after the store loads, the data gets put into the html of the grid.

[cerad]

GTCulbreth,

The grid automatically registers itself as a onLoad listener to the store. You don't need to do anything special. Whenever the store finishes loading the grid will update itself.

Something else is going on. You might want to take one of the examples and work from there just until you get a working grid.

[GTCulbreth]

Hi All, I am moving on to my next problem. The grid does not seem to have a columnModel, but that will be a different post.

After I get my code cleaned up I am going to post the json code as an example for other like me who want to use Ext but are not great at javascript, Json, or Ext.

Thanks for your help and see you next time. I hope.

[GTCulbreth]

Thanks all who helped.

[GTCulbreth]

Here is my code. I changed the names of some fields but it should work

I choose to separate the components as it makes it easier for me

This is the grid and record definition

    
    //This is the column model for the grid
    var dColumnModel =
        new Ext.grid.ColumnModel(
              [
                new Ext.grid.RowNumberer()
               ,{id:'dr_feild_id', header: "Feild id", width: 20, sortable: true, dataIndex: 'dr_feild_id'     ,hidden: true}
               ,{header: 'Feild Name'           ,width: 40, sortable: true, dataIndex: 'dr_feild_name'         } 
               ,{header: 'Feild Type'           ,width: 40, sortable: true, dataIndex: 'dr_feild_type_name'    ,hidden: true} 
               ,{header: 'Project Head'         ,width: 20, sortable: true, dataIndex: 'dr_project_head'       } 
               ,{header: 'Project Officer'      ,width: 20, sortable: true, dataIndex: 'dr_project_officer'    } 
              ]);
    
    // this is the record layout of the JSON data and maps to the columnModel          
    var listRec = 
        new Ext.data.Record.create([
            {name: 'dr_feild_id',            mapping: 'fld_id',  type: 'int'} 
           ,{name: 'dr_feild_name',          mapping: 'fld_n',   type: 'string'} 
           ,{name: 'dr_feild_type_name',     mapping: 'fld_t_n', type: 'string'} 
           ,{name: 'dr_project_head',        mapping: 'prj_h',   type: 'string'} 
           ,{name: 'dr_project_officer',     mapping: 'prj_o',   type: 'string'} 
          ]);

Next is the reader and Store definition:

    // Json reader (array) that parses the incoming data
    var dReader = new Ext.data.JsonReader(
                       {
                          totalProperty: 'numrows',
                          root:'rows',
                          id: 'dr_disaster_id'
                       },
                          listRec
                      );
                      
    // Store to get the data from the server                  
    var dStore =   new Ext.data.Store({
                        url: '/TOA/GetDisasterDataListAction.do',
                        reader: dReader,
                        listeners: {
                            loadexception: function(proxy, store, response, e) {
                                alert("The data did not load. \n"+proxy+"\n"+store+"\n"+response+"\n"+e.message);
                            }
                        }
                    });
    // Load dStore Start ------------------------------------------------------    
    
    //I used this to reload data after the initial load.
    
    dStore.load({
            waitTitle: 'Please Wait',
            waitMsg: 'Loading...',
            callback: function (records, options, success) {
                logger.trace("STORE:LOAD:callback");
                if (success) {
                }
                else {
                    logger.trace("XLoad failed");
                    Ext.MessageBox.show ({
                        msg: 'No Disaster records are available',
                        icon: Ext.MessageBox.WARNING,
                        buttons: Ext.MessageBox.OK
                    });
                }
                //Core.MessageHandler.display (reader);
            }
        });
    // Load dStore End ---------------------------------------------------------

Here is the grid definition that uses the components

    
    // Grid --------------------------------------------------------
    Here is the rowSelectModel for the grid.
    
        
    var dSelectionModel = new Ext.grid.RowSelectionModel({
            singleSelect:true,
            listeners: {
                'rowselect': function(sm, row, rec) {
                    
                }
            }
        });     
    
    // And finally the GridPanel itself.
    
    this.dGrid = new Ext.grid.GridPanel ({
        id: 'dgrid',
        collapsible: false,
        collapsed: false,
        store: dStore,
        cm: dColumnModel,
        selModel: dSelectionModel,
        viewConfig: {
            forceFit: true,
            autoFit:true
        },
        monitorResize: true,
        doLayout: function() {  //IF YOU WANT THE GRID TO LOOK CORRECT IN IE, DO THIS.
            this.setSize(Ext.get(this.getEl().dom.parentNode).getSize(true));
            Ext.grid.GridPanel.prototype.doLayout.call(this);
        },
        tbar: dButtons,
        listeners: {
            activate: function(g) { 
                if (editType = 'saved') {
                    g.getStore().load();
                };
            },
            render: function(g) {
                g.getSelectionModel().selectRow(2);
            }
        }

Also, the Json data looks like: (json: is my identifyer)

json:{"numrows":1,"rows":[{"fld_id":2,"fld_n":"DR41579-KS","fld_t_n":"DISASTER","prj_o":"","prj_h":"BACK, BILL"},
                          {"fld_id":3,"fld_n":"DR41579-VA","fld_t_n":"DISASTER","prj_o":"KIM","prj_h":"BACK, BILL"}]}