Results 1 to 5 of 5

Thread: Grid is empty even server returns data

  1. #1

    Default Grid is empty even server returns data

    I am implementing normal search functionality and on click of search button i need grid populated with creteria. from server side log level i know it returns rows but extjs side store always shows 0 record on alert statement. Probably because of AJAX but it never populates grid. Any idea? Please help.

    Here is the code for store and grid.

    Code:
    var searchds = new Ext.data.Store({        
                proxy: new Ext.data.DWRProxy(HBOGOAssetsService.getDummyData, true),
                   reader: new Ext.data.ListRangeReader( 
                    {id:'id',totalProperty:'totalSize'}, searchrecordType),
                     remoteSort: false        
        });  
          
              //create grid
              //renderer: renderAssetDetails,
              
        var searchGrid = new xg.GridPanel({
                id:'button-grid',
                store: searchds,
                cm: new xg.ColumnModel([
                    searchSM,
                    {id:'id',header: "Id", width: 20, hidden: true, sortable: false, dataIndex: 'id'},
                    {header: "Title / Description", width: 230, renderer: renderAssetDetails, sortable: true, dataIndex: 'title'},
                    {header: "Categories", width: 100, sortable: true,renderer: renderCategories, dataIndex: 'categories'},
                    {header: "Start Date", width: 110, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y g:i a'), dataIndex: 'startDate'},
                    {header: "End Date", width: 110, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y g:i a'), dataIndex: 'endDate'},
                    {header: "Status", width: 120, renderer: renderStatus, sortable: true, dataIndex: 'status'}                      
                ]),
               sm: searchSM,
                viewConfig: {
                    forceFit:true
                },
        
                bbar:[
                      new Ext.PagingToolbar({
                        pageSize: 20,
                        store: searchds,
                        displayInfo: true,
                        displayMsg: 'Displaying topics {0} - {1} of {2}',
                        emptyMsg: "No topics to display",
                        items:[
                            '-']
                    })],
                listeners: {
                    render: function(g){
                      //commit changes
                      //alert("hello");
                      this.getSelectionModel().on('rowselect', this.onRowSelect, this);
                    }
                },
                    onRowSelect: function(sm, rowIdx, r) {
                    //var desc = r.data.desc;
                    html = [
                                ' '
                     ];
                },
                width:985,
                height:500,
                frame:true,
                stripeRows: true,
                title:'Search Results for Assets',
                iconCls:'icon-grid'                     
          });
            searchGrid.render('grid-results');
    This is the search form. that has some input field and search & rset button.


    var searchrecordType = Ext.data.Record.create([
    {name: "id"},
    {name: "title", type: "string"},
    {name: "categories", type: "string"},
    {name: "startdate", type: "date"},
    {name: "enddate", type: "date"},
    {name: "status", type: "string"}
    ]);


    Code:
    var searchAssetsTab = new Ext.FormPanel({
    
       // removed stuff here        
     buttons: [
              {
                text: 'Search',
                handler: function () {
                    searchAssetsTab.getForm().findField('keywords').setValue(Ext.util.Format.trim(searchAssetsTab.getForm().findField('keywords').getValue()));        
                    var getKeywords = Ext.util.Format.trim(searchAssetsTab.getForm().findField('keywords').getValue());
                    //alert("Keywords "+getKeywords);
                    //alert("Service "+searchAssetsTab.getForm().findField('service').getValue());
                    //alert("status "+searchAssetsTab.getForm().findField('status').getValue());
                    //alert("categories "+searchAssetsTab.getForm().findField('categories').getValue());
                    if(searchAssetsTab.getForm().findField('service').getValue() == null || searchAssetsTab.getForm().findField('service').getValue() == ""){
                        Ext.Msg.alert('Search', 'Please select a Service.');
                        return;
                    }
                    
                     if(searchAssetsTab.getForm().isValid()){
                        //this.selections.clear();            
                        searchGrid.getGridEl().mask('Searching...', 'x-mask-loading');
                        searchds.on('beforeload', function() { 
                            searchds.baseParams = { 
                                arg:[getKeywords, 
                                     searchAssetsTab.getForm().findField('startdt').getValue(),
                                     searchAssetsTab.getForm().findField('enddt').getValue(),
                                     searchAssetsTab.getForm().findField('service').getValue(),
                                     searchAssetsTab.getForm().findField('status').getValue(),
                                     searchAssetsTab.getForm().findField('categories').getValue()], 
                                 viaParam: true 
                               }; 
                        });                            
                        
                        alert("reloading ");
                        searchds.load({params:{start:0, limit:20}, 
                            arg:[getKeywords, 
                             searchAssetsTab.getForm().findField('startdt').getValue(),
                             searchAssetsTab.getForm().findField('enddt').getValue(),
                             searchAssetsTab.getForm().findField('service').getValue(),
                             searchAssetsTab.getForm().findField('status').getValue(),
                             searchAssetsTab.getForm().findField('categories').getValue()]});
                        alert("reloaded "+searchds.getCount());            
                        searchds.on('load', function(){
                              alert("while reaching next page "+searchds.getCount());    
                              if(searchds.getCount() <= 0){
                                  searchGrid.getGridEl().unmask(true);
                                  Ext.Msg.alert('Results', 'No results found. Please try a new search.');
                              }else{
                                  searchGrid.getGridEl().unmask(true);
                              }
                            });
                        alert("reloaded "+searchds.getCount());     
                    }    
                     
                    
                    //searchGrid.getStore.load({params:{start:0, limit:20}});                
                }
            },
            {
                text: 'Reset',
                handler: function () {
                    searchAssetsTab.getForm().reset();                
                    if (searchGrid) {
                        searchGrid.getStore().removeAll();
                    }
                }
            }] 
            ,buttonAlign : 'center'
            });
      
        
        searchAssetsTab.render('grid-form');

  2. #2

    Default Grid remains empty

    Can you please help if any ideas?

    I posted a thread in wrong section.

    Please check this url. It has all required code.
    http://<br /> http://www.extjs.com/...867#post457867

  3. #3

    Default

    I don't know exactly what the problem is, but I can tell you what the problem is: the JSON packet that's being sent back from the server does not exactly match what the JavaScript code is expecting it to be. Somewhere along the way, the mismatch causes an exception to be thrown within the Store object (or the Proxy object), and to be silently caught by that object ... and to make a long story short, nothing actually gets accepted.

    Carefully and methodically examine everything about how your JavaScript code is set up and compare it to exactly what the server is sending. ReMeMbEr ThAt JaVaScRiPt Is CaSe SeNsItIvE!

    "This is baseball, not atomic warfare: if you miss, an inch is as bad as a mile."

  4. #4
    Ext User Sgt.Pepper's Avatar
    Join Date
    Jun 2009
    Location
    Dsseldorf, Germany
    Posts
    41

    Default

    I checked the URL: Can't make anything useful from it...

  5. #5
    Sencha User jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364

    Default

    Merged with your original thread.


    Stop posting help related questions in the open discussion.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •