Results 1 to 3 of 3

Thread: Issue with tab panels while restore and maximize browser

  1. #1
    Sencha User
    Join Date
    Aug 2012
    Location
    hyderabad
    Posts
    34

    Default Answered: Issue with tab panels while restore and maximize browser

    Hi,
    I have tab panel with three tabs, each tab contains one form panel and one grid panel.
    It looks fine but the problem is, when i restore the browser the width of the form & grid panels are reduced to browser's width.
    when i maximize the browser the width of the form panel increased but not the grid panel's width.

    I'm using Google chrome browser.
    My extjs version is 4.0.2.

    Here is code for tab panel

    Code:
    var myTabPanel  = Ext.create('Ext.tab.Panel', {
        plain: true,
               border:false,
               defaults: {
                listeners: {
                    activate: function(tab, eOpts) {
                        alert(tab.title);
                    }
                }
               },
        items : [ {
                title : 'Employees',
                items : [ this.fomPanel1,
                          this.gridPanel1
                       ]
            }, {
                title : 'Immigrations',
                items : [ this.fomPanel2,
                          this.gridPanel2
                       ]
            },{
                title : 'Certifications',
                items : [ this.fomPanel3,
                          this.gridPanel3
                       ]
                }]
        });
    Here is panels in 1st tab

    Code:
    Ext.define('tz.ui.MyFormPanel', {
        extend: 'Ext.form.Panel',    
        bodyPadding: 10,
        title: '',
        frame:true,
        anchor:'98%',
        autoScroll:true,
    
    
        initComponent: function() {
            var me = this;
            
            me.items = [{
                     .........................................................                   
                     .........................................................                   
                     .........................................................                   
    
    
    
                }]; 
            me.callParent(arguments);
        }    
    });
    
    Ext.define('tz.ui.MyGridPanel', {
        extend: 'Ext.grid.Panel',
        title: '................',
        frame:true,
        anchor:'100%',
        height:490,
        width :'100%',
        initComponent: function() {
            var me = this;
            me.store = myExampleStore;
    
    
            me.columns = [
                {
                     .........................................................                   
                     .........................................................                   
                     .........................................................                   
                }
            ];
            me.viewConfig = {
                   stripeRows: true    
            };
            me.dockedItems = [
                {
                     .........................................................                   
                     .........................................................                   
                     .........................................................                   
                }
    
            ];
            me.callParent(arguments);
        } 
    
    });
    Snap shots :

    tab panel 1.jpgtab panel 2.jpg

  2. You should specify a layout for your parent container .. eg: layout: 'fit'

    Scott.

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716

    Default

    You should specify a layout for your parent container .. eg: layout: 'fit'

    Scott.

  4. #3
    Sencha User
    Join Date
    Aug 2012
    Location
    hyderabad
    Posts
    34

    Default

    Thanks Mr. scottmartin,

    This is fixed with layout: 'fit'

    Here is my fixed code of tab panel

    Code:
    var myTabPanel  = Ext.create('Ext.tab.Panel', {
        plain: true,
               border:false,
               layout:'card',
               defaults: {
                listeners: {
                    activate: function(tab, eOpts) {
                        alert(tab.title);
                    }
                }
               },
        items : [ {
                title : 'Employees',
                layout:'fit',
                items : [ this.fomPanel1,
                          this.gridPanel1
                       ]
            }, {
                title : 'Immigrations',
                layout:'fit',
                items : [ this.fomPanel2,
                          this.gridPanel2
                       ]
            },{
                title : 'Certifications',
                layout:'fit',
                items : [ this.fomPanel3,
                          this.gridPanel3
                       ]
                }]
        });

Tags for this Thread

Posting Permissions

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