Results 1 to 4 of 4

Thread: Dynamically setting the height of a panel

  1. #1
    Sencha User
    Join Date
    Jan 2008
    Posts
    154

    Default Dynamically setting the height of a panel

    I need to be able to set a specific coordinate position of the south region upon expanding it. It will need to be based off of the coordinates of a row position within a grid in the center region. I have seached this forum for hours and not found what I need for this. Right now, I appear to be able to get the coordinates of the row that was clicked in a grid within the center region, I can expand the south region automatically, I can place the title from the center grid within the title of the south panel, I can dynamically add a grid to one of the tabs but for the life of me, I have not been able to set the desired height of the expanded south region. The south region has a tabpanel defined in it with a grid within one tab (so far). The code is as follows:

    // Viewport south region definition
    Code:
     items:[{
                     region:'north',
                     title: 'Main Title',
                     height:32
                   
                    },{
                    
                      region: 'south', 
                      split:true,  
                      height: 300,
                      id: 'south-panel',
                      minSize: 50,
                      maxSize: 800,
                      collapsed: true,
                      bbar : [
    		     {xtype: 'tbtext', text: 'Copyright.'} 
    	         ],  // Adds the bottom status bar
                      columnWidth:.6,
                     
                      collapsible: true,
                      hidden:true,
                      items:[{
    	             id:'portlet1',
    	             title: 'Science',
                              collapsible: true,
                              plugins: new Ext.ux.MaximizeTool(),
                              items: tab2  // See below
    	        }]
                      
                   },{ // rest of regions
    
    // TabPanel definition
    
    var tab2 = new Ext.TabPanel({
              renderTo: document.body,
              activeTab: 1,
              width:750,
              //height:400,
              plain:true,
                  
              id:'Companytabs',
            
              items:[{
                          title: 'Tab1'
                       },{
                          title: 'Tab2',
                          id:'teamid'
                       },{
                          title: 'Tab3'
                       },{
    	         title: 'Tab3'
    	      },{
    	         title: 'Tab4'
    	      },{
    	         title: 'Tab5'
              
                }
            ]
     	
        });
    
    // Function to handle row click within center grid
    function handleDoubleRowClick(grid, rowIndex, columnIndex, myElement){
      
           var fieldName = grid.getColumnModel().getDataIndex(4); // Get field name
           var store = grid.getStore();
           var record2 = grid.store.getAt(rowIndex,4);
           var namePortfolio = record2.get(fieldName);
           var wxx = Ext.getCmp('Companytabs');
           var wyy = Ext.getCmp('south-panel');
           var w = Ext.getCmp('teamid');
           var south = Ext.getCmp('portlet1');
           var coords = myElement.getXY();
    
          //  Grid definition here which is added to tab below
    
            if(Ext.get('gridteam') == null){
    
               w.add(gridtab);    // add grid to tab
            } 
    
           south.setTitle(namePortfolio);
           wyy.setHeight(coords[1]);   ???????
           wyy.expand(true);  // expand the south region
        
           wyy.doLayout();
           wyy.show(true);
           wxx.doLayout();  // Causes grid to show first time in tab needed!!
           wxx.setVisible(true);
           wxx.show();
    };

  2. #2
    Sencha User
    Join Date
    Jan 2008
    Posts
    154

    Default

    Any help on setting the height of the south region dynamically would be greatly appreciated. I have tried to solve this unsuccessfully for many days. This region has a tabpanel and then a gridpanel is added dynamically within one of the tabs.

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,892

    Default

    You should be able to just set the height of the south Panel, then call doLayout on its container.

  4. #4
    Ext User
    Join Date
    Aug 2007
    Posts
    212

    Default

    maybe this will help you - I set the hight of a column layout that is nested in my center region - dynamic sized based on the height of the center region.

    Code:
                        var center = Ext.getCmp('center');	
    			var colHeight = center.getInnerHeight() - 40;
    			var col = new Ext.Panel({
    			    layout:'column',
    			    id:'col',
    			    border: false,
    			    items: [{
    			        title: menuItm.text,
    			        id: 'listPanel',
    			        columnWidth: .49,
    			        autoScroll: true,
    			        height: colHeight,
    			        autoLoad: menuItm.dataURL
    			    },{
    			    	columnWidth: .02,
    			    	border: false
    			    },{
    			        title: 'Form - Add New',
    			        id: 'formPanel',
    			        columnWidth: .49,
    			        autoScroll: true,
    			        height: colHeight,
    			        autoLoad: menuItm.formURL
    			        //items:[window["auditForm"]]
    			        
    			    }]
    ...
    ...
    ...

Posting Permissions

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