1. #1
    Ext User
    Join Date
    Jul 2008
    Posts
    42
    Vote Rating
    0
    mallik is on a distinguished road

      0  

    Default adding grid panel into an existing tab panel

    adding grid panel into an existing tab panel


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

    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.
    
    
    }

  2. #2
    Ext User
    Join Date
    Jul 2007
    Posts
    3,128
    Vote Rating
    0
    devnull has a little shameless behaviour in the past

      0  

    Default


    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).

  3. #3
    Ext User
    Join Date
    Jul 2008
    Posts
    43
    Vote Rating
    0
    pachaudhary is on a distinguished road

      0  

    Default urgent: adding grid panel into existing tab panel

    urgent: adding grid panel into existing tab panel


    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.

  4. #4

  5. #5
    Ext User
    Join Date
    Jul 2008
    Posts
    43
    Vote Rating
    0
    pachaudhary is on a distinguished road

      0  

    Default adding grid panel into an existing tab panel

    adding grid panel into an existing tab panel


    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.

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

      0  

    Default


    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.