grid doesn't size correctly inside tabpanel inside panel

[pflammer]

I am having an issue with the sizing of a gridpanel that I am putting inside of a tabpanel inside of a mother panel. It must be an issue with the layout of the grid not understanding how big it should be when it is layed out.

The order in which I am doing things:
1) Create mother panel with an empty tabpanel.
2) on afterRender: send an AJAX request for the buttons that informs what gridpanels will be included and information for the bbar of each grid.
3) In the success callback of the AJAX request create the grid panels, add them to the tabpanel, load the grid store.
4) on render for each grid, I doLayout for the mother panel (ownerCt for the tabPanel).

If i resize the window that contains this custom panel, everything resizes correctly. This makes me think that my order of operations is mixed up and everything isn't in place when the layout is done.

Thanks!

[evant]

Sounds ok.

Can you post a sample of your code?

[mystix]

are both your "mother panel" and nested tabpanel configured with layout:'fit' (or with any layout at all)?

post code.

[pflammer]

Here is the code for the extended panel class. The usage is to either put it in as an item into an Ext.Window with 'fit' layout or an Ext.TabPanel. Both methods don't show scroll bars for overflow in the grid and the buttons (which show at the bottom of the grid) don't show. Once either the Ext.window or the TabPanel is resized it works fine.

 
Ext.ux.empManPanel = Ext.extend(Ext.Panel, {
 layout:'border'
 ,initComponent:function() {
     Ext.apply(this, {
      items:[{
       xtype: 'tabpanel'
       ,region: 'center'
   }]
  });
     Ext.ux.empManPanel.superclass.initComponent.call(this);
     this.cPanel = this.items.itemAt(0);
 }
 ,afterRender: function() {
     Ext.ux.empManPanel.superclass.afterRender.call(this);
     this.getButtons();
 }
 ,loadGrid: function (id,title,action,url,btns) {
     // autosubmit grid is just an extension of grid that uses server side paging/filtering
     // buttons is loaded into bbar; it works in other places that do not load when the 
     // panel is created and after this is resized.
     var grid = new Ext.ux.grid.AutoSubmitGrid({
      id: id,
      title: title,
      buttons: btns,
      region: 'center',
      loadMask: true,
      autoScroll:true,
      selModel: new Ext.grid.CheckboxSelectionModel({singleSelect: true}),
      params: {
   'pv': pv,
   action : action
      },
      conn: {url: url},
      pageSize: 50,
      pagerLocation: 'top',
      scope:this
  });
     this.cPanel.add(grid);
     this.cPanel.body.mask('Loading','x-mask-loading');
     grid.on('render',this.onGridRender,this);
 
     this.cPanel.layout.setActiveItem(grid);
     grid.store.load();
 }
 ,getButtons: function (){
     // Getting the button information for the grid
     Ext.Ajax.request({
      url: 'empInfo.php',
      scope: this,
      method: 'POST',
      params: {'pv': pv, action: 'buttons'},
      failure: function() { MyDesktop.showSessionExpired(); return false;},
      success: function(r,o) {
   var jsonObj = Ext.util.JSON.decode(r.responseText);
   if(jsonObj.showClasses==true){
       var classButtons = ((jsonObj.showClassBtns==true)?jsonObj.classButtons:false);
       this.loadGrid('emp-class-grid','Classes','classView','empInfo.php',classButtons);
   }
   var buttons = ((jsonObj.showButtons==true)?jsonObj.buttons:false);
   this.loadGrid('emp-man-grid','Employees','view','empInfo.php',buttons);
   return true;
      }
  });
 } 
 ,onGridRender: function(grid){
     // Attempt to relayout so buttons will actually show up??
     this.doLayout();
     // This just deactivates the buttons if nothing is selected
     var bbar = grid.getBottomToolbar();
     if(bbar){
  var curButtons = bbar.items.items;
  for(var i=0; i < curButtons.length; i++){
      if(curButtons[i].action && (curButtons[i].action.indexOf('modify')!=-1 || curButtons[i].action=='changeEmpPassword')){
   curButtons[i].disable();
      }
  }
     }
     this.cPanel.body.unmask();
     return true;
 }
    });
Ext.reg('autoGridPanel',Ext.ux.empManPanel);

Thanks!

[pflammer]

are both your "mother panel" and nested tabpanel configured with layout:'fit' (or with any layout at all)?

post code.

I didn't think to make the tabpanel have a fit layout. I actually thought that the tabPanel was its own layout engine. I will try it with layout:'fit' in the tabpanel.

[mystix]

I didn't think to make the tabpanel have a fit layout. I actually thought that the tabPanel was its own layout engine. I will try it with layout:'fit' in the tabpanel.

my mistake. scratch that -- tabpanel is preconfigured with layout: 'card', which you can't change.

it's the "tabs" that need to have layouts configured -- check those.

[pflammer]

I am adding the grid panel directly to the tabPanel. Should I nest it inside another panel with layout:'fit'?

[Animal]

It's the extend-to-configure mess again. I'm not getting involved.

[pflammer]

Animal-

Could you maybe refer me to some other examples of this problem, or maybe give me some advice on how to avoid the problem alltogether? This problem has plagued me for months, and I've actually tried a number of different solutions (with and without the tabpanel, etc.), and if there is a better way to do this, I would like to learn it.

Thanks!
pflammer

[mystix]

Animal-

Could you maybe refer me to some other examples of this problem, or maybe give me some advice on how to avoid the problem alltogether? This problem has plagued me for months, and I've actually tried a number of different solutions (with and without the tabpanel, etc.), and if there is a better way to do this, I would like to learn it.

Thanks!
pflammer

as @animal has wisely advised, avoid extending to configure.

simply create a Panel with a borderlayout, having a tabpanel as the center region, which in turn has a gridpanel as one of its tabs, and work from there. in short -- break it down and simplify.

p.s. also avoid overnesting, as what you've suggested in post #7.