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

      0  

    Default


    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.

    Code:
        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();

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

      0  

    Default


    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

  3. #13
    Sencha User fay's Avatar
    Join Date
    Apr 2007
    Location
    Ireland
    Posts
    1,750
    Vote Rating
    9
    fay will become famous soon enough fay will become famous soon enough

      0  

    Default


    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.

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

      0  

    Default


    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.

  5. #15
    Ext User
    Join Date
    Jul 2007
    Location
    Florida
    Posts
    9,996
    Vote Rating
    5
    mjlecomte will become famous soon enough mjlecomte will become famous soon enough

      0  

    Default


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

    Code:
    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.

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

      0  

    Default


    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.

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

      0  

    Default


    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.

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

      0  

    Default [Solved] Problem Loading JSON Store

    [Solved] Problem Loading JSON Store


    Thanks all who helped.

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

      0  

    Default


    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
    Code:
        
        //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:
    Code:
        // 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

    Code:
        
        // 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)
    Code:
    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"}]}