Page 2 of 2 FirstFirst 12
Results 11 to 16 of 16

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

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

    Default avoiding extend to configure

    Quote Originally Posted by mystix View Post
    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.
    I see. The reason I have done this is that this type of panel is called from a number of locations in my app, and I didn't want to have duplicated code everywhere this type of panel is created. In addition to this, I have two 'views' for my app, a tab view and a desktop-style view which would cause further duplication.

    Is there another way outside of extending to eliminate the duplication?

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

    Default

    create a factory method which simply returns either a new motherpanel instance, fully configured, or just a plain old javascript object

    e.g.
    Code:
    function createMotherPanel() {
        return new Panel({
            layout: 'border',
            // ... ... ...
    
            items: {
                region: 'center',
                xtype: 'tabpanel',
                items: {
                    xtype: 'grid',
                    // ... ... ...
                }
            }
        });
    }

  3. #13
    Touch Premium Member
    Join Date
    Jun 2008
    Posts
    41

    Default thank you

    Thanks, I will do that.

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

    Default SOLVED: layout done on grid.store load (not grid orender)

    Ok. So I changed the creation of the panel from extending the panel to follow the factory method, but the problem persisted in IE6 (didn't test IE7). I should have mentioned that the problem only showed up in IE in the first place.

    However, the problem fixed itself when I changed the layout to be performed on the grid store load, and not the grid render. I thought if anyone else had a similar problem, this might be useful to them.

    Perhaps in IE the grid render is being called before it knows how long the data set it so the bottom gets cut off.

    Thanks for all the help.

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

    Default

    Post the new code.

  6. #16
    Touch Premium Member
    Join Date
    Jun 2008
    Posts
    41

    Default code

    Here is the code as it stands. It seems to have resolved the issue. Like I said above, if I run onGridLoad when the grid renders, it still doesn't work in IE6/7. I have tested this in IE6/7,FF2/3 and it seems to work fine.


    Code:
     
    EmpManPanel = function (config){
        this.factory = function (cfg){
     var cfgDefault = {
         layout:'border'
         ,items: new Ext.TabPanel({region:'center'})
     };
     if(cfg){
         for(key in cfg){
      cfgDefault[key] = cfg[key];
         }
     }
     
     var mainPanel = new Ext.Panel(cfgDefault);
     var cPanel = mainPanel.items.itemAt(0);
     cPanel.on('render',this.getButtons,this);
     return mainPanel;
        }
        this.loadGrid = function (id,title,action,url,btns,cPanel) {
     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
         });
     cPanel.add(grid);
     grid.on('render',function(grid){grid.body.mask('Loading')}); 
     grid.on('beforeButtonClick',this.empButtonManager,this);
     grid.on('cellclick',this.onCellClick,this);
     grid.on('sortchange',this.onSortChange,this);
     grid.store.on('load',function(){this.onGridLoad(grid)},this)
     grid.store.load();
     cPanel.setActiveTab(grid)
     return true;
        }
        this.getButtons = function (cPanel){
     // 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 btns = Ext.util.JSON.decode(r.responseText);
          
          if(btns.showClasses==true){
       var classButtons = ((btns.showClassBtns==true)?btns.classButtons:false);
       this.loadGrid('emp-class-grid','Classes','classView','empInfo.php',classButtons,cPanel);
          }
          var buttons = ((btns.showButtons==true)?btns.buttons:false);
          this.loadGrid('emp-man-grid','Employees','view','empInfo.php',buttons,cPanel);
          return true;
      }
         });
        }
        this.onGridLoad = function(grid){
     grid.ownerCt.doLayout();
     return true;
        }
        return this.factory(config);
    }
    Thanks again!

Page 2 of 2 FirstFirst 12

Posting Permissions

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