Results 1 to 4 of 4

Thread: Display issue in tabchange

  1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    11
    Vote Rating
    0
      0  

    Default Display issue in tabchange

    Hi All,

    I have a tab panel which has three tabs in that, every tab has different contents, which defines different height for each tab.

    This tab panel is wrapped by a panel (this is to give a title for the tab panel) and this is defined in the viewport, which is common for all other pages also.

    Now, the problem is if the tab 1 has a some contents, it will define a certain height, the same height will be set to all other tabs, when a tab change is done the contents in that tab below first tabs height is hidden (attached screen shots).

    I have attached the sample file and snapshot of the issue.

    Please fine the attachment.

    Regards,
    Kamal
    Attached Files Attached Files

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Posts
    3
    Vote Rating
    0
      0  

    Default Display issue in tabchange

    Hi,
    we also could reproduce the issue in Extjs 4.1 final release.
    can someone help us..

    Thanks,
    Soosai

  3. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    7
    Vote Rating
    0
      0  

    Default

    I am also having same issue

  4. #4
    Sencha User sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,335
    Answers
    124
    Vote Rating
    91
      0  

    Default Don't give height to the parent panel of tabpanel

    Hello,
    I try to create the condition of which pics you have attached. Then I realize that I think you have given the height of panel(that is the parent of tabpanel).
    So remove the height of panel, then you will see the dynamic height of tabpanel.
    here is the sample code:
    • put the sample code in js file.
    • add this js file in your html page.
    • put the html section in html page.

    HTML Code:
    <script type="text/javascript">
                Ext.onReady(function(){
                    new Example.page.View();
                });
     </script>
    Code:
    Ext.ns('Example.page');
    Example.page.View = Ext.extend(Ext.Viewport, {
        height: 300
        , width: 500
        , renderTo: Ext.getBody()
        , initComponent: function () {
            this.items = this.buildItems();
            Example.page.View.superclass.initComponent.call(this);
        }
        , buildItems: function () {
            return [
                {
                    xtype: 'panel'
                    , border: true
                    , title: 'Sample Panel'
                    , items: {
                        xtype: 'tabpanel'
                        , activeItem: 0
                        , items: [
                            {
                                title: 'Home'
                                , items: [
                                    {
                                        xtype: 'box'
                                        , html: 'tab1'
                                    }
                                ]
                            },
                            {
                                title: 'Users'
                                , items: [
                                    {
                                        xtype: 'box'
                                        , height: 100
                                        , html: 'tab2'
                                    }
                                ]
                            }
                        ]
                    }
                },
                {
                    xtype: 'box'
                    , html: 'this is the cmp after panel.'
                }
            ];
        }
    });
    If you have any query about this solution, let me know.

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
  •