Page 1 of 2 12 LastLast
Results 1 to 10 of 16

Thread: grid doesn't size correctly inside tabpanel inside panel

  1. #1
    Touch Premium Member
    Join Date
    Jun 2008
    Posts
    41

    Thumbs up grid doesn't size correctly inside tabpanel inside panel

    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!

  2. #2
    Sencha Premium User evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    19,256

    Default

    Sounds ok.

    Can you post a sample of your code?
    Twitter - @evantrimboli
    Former Sencha framework engineer, available for consulting.
    As of 2017-09-22 I am not employed by Sencha, all subsequent posts are my own and do not represent Sencha in any way.

  3. #3
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236

    Default

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

    post code.

  4. #4
    Touch Premium Member
    Join Date
    Jun 2008
    Posts
    41

    Default code

    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.

    Code:
     
    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!

  5. #5
    Touch Premium Member
    Join Date
    Jun 2008
    Posts
    41

    Default

    Quote Originally Posted by mystix View Post
    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.

  6. #6
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236

    Default

    Quote Originally Posted by pflammer View Post
    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.

  7. #7
    Touch Premium Member
    Join Date
    Jun 2008
    Posts
    41

    Default grid being added directly to tabpanel

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

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

    Default

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

  9. #9
    Touch Premium Member
    Join Date
    Jun 2008
    Posts
    41

    Default Extend to configure

    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

  10. #10
    Sencha User mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236

    Default

    Quote Originally Posted by pflammer View Post
    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.

Page 1 of 2 12 LastLast

Posting Permissions

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