adding grid panel into an existing tab panel

[mallik]

Hi,

I am creating a tabpanel with tabs generated dynamically through Ajax call as shown. and then activating first tab and trying to add generated grid panel to it. But I am not able to see the generated in the activated tab ... it is displaying empty .. The line in bold is not working ... please check the code...

 var createCenterRegion = function(){
    filterTabs = new Ext.TabPanel({
            border:false,
            tabPosition:'top',
            enableTabScroll : true,
            animScroll:true,
            layoutOnTabChange: true
        });

    var postDataMap={"method":'getFilterList',
                     "userid":loggedInUserId,
                      param:{"userid":loggedInUserId},
                      requesttype:1};             
    
    Ext.Ajax.request({
           url: '../../../presentation/presentationManager.php',
           success: createEventTabbedGrid,
           params:{json_data:Ext.util.JSON.encode(postDataMap)}
        });
    
    return filterTabs ;
}

var createEventTabbedGrid = function(responseObj){
    if(responseObj==null)
        return;
    var responseInfo = processResponse(responseObj);
    if(responseInfo!=false){
        filterListArray = new Array(responseInfo.filternamelist.length) ;
        for(var i=0;i<responseInfo.filternamelist.length;i++){
            filterListArray[i]= responseInfo.filternamelist[i].filtername;                    
            filterTabs.add({ title: toTitleCase(filterListArray[i]),
                              id:filterListArray[i],
                              autoScroll:true,
                              listeners: {activate: handlerClickFilterTab}
                          });
              

                } // end of for loop         
        } // end of if 
   
    currentSelectedTab  =  toTitleCase(filterListArray[0]);
    //getEventGridData(toTitleCase(filterListArray[0]));        
    
    createEventGrid(toTitleCase(filterListArray[0]) ,"getEventListForFilter");    
    filterTabs.setActiveTab(currentSelectedTab);
    
    
    
  }// end of createEventTabbedGrid


var createEventGrid = function(filterName, method){        

    

    var postDataMap={"method":method,
                     "userid":loggedInUserId,
                      param:{"userid":loggedInUserId,
                             "filtername":filterName           
                             },
                     requesttype:1};         
                     
                     
    ds = new Ext.data.Store({
        waitMsg:'Loading ... Please Wait.',
        proxy: new Ext.data.HttpProxy({    url:"../../../presentation/presentationManager.php", method:'POST'}), 
        baseParams:{json_data:Ext.util.JSON.encode(postDataMap)},                            
                                    
        reader: new Ext.data.JsonReader(
        {
        totalProperty: 'pagecount' ,
        root:'eventList'},
        [
            {name: 'id', mapping: 'id'},
            {name: 'eventdate', mapping: 'eventdate'},
            {name: 'facility', mapping: 'facility'},
            {name: 'severity', mapping: 'severity'},
            {name: 'infounit', mapping: 'infounit'},
            {name: 'host', mapping: 'host'},
            {name: 'message', mapping: 'message'},
            {name: 'ownername', mapping: 'ownername'}
        ])
        //data: responseInfo
    }); // end of data store
    
    

    var expander = new Ext.grid.RowExpander({
        tpl : new Ext.Template(
            '<b>Event Details : </b> {message}'
        )
    }); 
    

    var cm = new Ext.grid.ColumnModel([    
        expander,
        {header: "id",  sortable: true, dataIndex: 'id', hidden :true, width: 5,align:'left'},
        {header: "Date",  sortable: true, dataIndex: 'eventdate', width: 23, align:'left'},
        {header: "Facility",  sortable: true, dataIndex: 'facility', width: 10 , align:'right'},
        {header: "Severity",  sortable: true, dataIndex: 'severity', width: 15,  align:'left'},
        {header: "Info Unit", sortable: true, dataIndex: 'infounit', width: 10,  align:'left'},
        {header: "Host", sortable: true,  dataIndex: 'host', width: 10,  align:'left'},
        {header: "Message",  sortable: true,  dataIndex: 'message', width: 45, align:'left'},
        {header: "Owner",  sortable: true,  dataIndex: 'ownername', width: 15, align:'left'}            
    ]);

    var pagination=  new Ext.PagingToolbar({
                    store: ds,
                    autoLoad: true,
                    displayInfo: true,
                    displayMsg: 'Displaying topics {0} - {1} of {2}',
                    emptyMsg: "No results to display"
        });


    // Create Grid Panel
    eventGridList = new Ext.grid.GridPanel({
        bbar:pagination,
        border:false,
        layout:'fit',
        ds: ds,                       
        cm: cm ,
        sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
        plugins: expander,
        viewConfig: {
            forceFit:true
        },
        collapsible: false
        
    }); // end of GridPanel
    
     rowCount = rowCountNumber;
     ds.load({params:{start:0, limit:rowCount}});
    
    // Add grid to tabs
/*    for(var i=0;i<filterListArray.length;i++){
        if(toTitleCase(currentSelectedTab) == toTitleCase(filterListArray[i])){
            eventGridList.setTitle(toTitleCase(currentSelectedTab));
            filterTabs.add(eventGridList);
            filterTabs.setActiveTab(eventGridList);
        }        
        else{
            filterTabs.add({ title: toTitleCase(filterListArray[i]),
                              autoScroll:true,
                              listeners: {activate: handlerClickFilterTab}
                          });
        }  
    } */

    /* filterTabs.addListener('click', function(){
        alert('clicked');
    }); */
    
    eventGridList.getView().getRowClass =     function(record, index){
           var data = record.data; 
          switch (data.severity.toUpperCase()){
             case 'EMERGENCY' :          
                cls = 'severity_EMERGENCY';       
                break; 
             case 'ALERT' :          
                cls = 'severity_ALERT';       
                break; 
             case 'CRITICAL' :          
                cls = 'severity_CRITICAL';       
                break; 
             case 'ERROR' :          
                cls = 'severity_ERROR';       
                break; 
             case 'WARNING' :          
                cls = 'severity_WARNING';       
                break; 
             case 'NOTICE' :          
                cls = 'severity_NOTICE';       
                break; 
             case 'INFO' :          
                cls = 'severity_INFO';       
                break; 
             case 'DEBUG' :          
                cls = 'severity_DEBUG';       
                break; 
          }
          return cls;
    };
    
    //filterTabs.show();
} // end of createEventGrid


var handlerClickFilterTab = function(tab){    

filterTabs.getComponent(tab.title).body.update(eventGridList); // this is not working.


}

[devnull]

I am having a really hard time following that code, but I will offer the advice that you should add the grid directly as an item to the tabPanel, rather than adding a panel and then trying to update its body with the grid (which wont work as you noticed).

[pachaudhary]

Hi,

I would like to consolidate the above logic.
We need to first get the list of tabs from the backend
this is done in method createCenterRegion(). After this
we need to display a grid for the defualt selected and later for user clicked tabs.
This is done in method createEventGrid (). This grid object then needs to be added to
the appropriate tab. so we have this complex logic.
I had done some google and found that
Tab.getComponent(2).body.update(grid); should work.
But in our case we are not able to see the grid inside the tab
Can you suggest some work around for the same.

Regards
pankaj.

[mjlecomte]

http://examples.extjs.eu/gridintab.html

[pachaudhary]

Hi,

I have seen this eample, but in this the tabs are created statically and is created statically. But in our case the grid as well as the tabs are loaded from the backend data.
So this appraoch will not work here, we will have to use the API's provide by tabpanel and gridpanel.

[mjlecomte]

Is there a question here or what?

Look to remoteComponent extension/plugin or extensions or examples related to configuring components by metaData. Depends how much of your component is established by backend I guess.