1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    11
    Vote Rating
    0
    kamalraj is on a distinguished road

      0  

    Default Unanswered: Display issue in tabchange

    Unanswered: 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

  2. #2
    Sencha User
    Join Date
    Mar 2011
    Posts
    3
    Vote Rating
    0
    kutiarul is on a distinguished road

      0  

    Default Display issue in tabchange

    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
    kpavan304 is on a distinguished road

      0  

    Default


    I am also having same issue

  4. #4
    Sencha - Community Support Team sword-it's Avatar
    Join Date
    May 2012
    Location
    Istanbul
    Posts
    1,333
    Answers
    124
    Vote Rating
    85
    sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough sword-it is a jewel in the rough

      0  

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

    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.

Thread Participants: 3

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi