1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    0
    andreyb is on a distinguished road

      0  

    Default Unanswered: Autoheight tabPanel when tab content changed

    Unanswered: Autoheight tabPanel when tab content changed


    Hi, all.
    I know this question has been asked for a dozen of times, but I can't find correct answer for my case.
    All I want to have is ExtJS tabPanel with 1 tab, content of which can be changed dinamycaly. For example 3 line text may be replaced with 30 lines text.

    My code is following http://jsfiddle.net/andreyb89/PYYaq/1/

    I have seen answers that I must put panel in some other container with layout: 'fit', so I tried to put panel in Ext.container.Container with layout: 'fit' but there is no result. If I change inner text tabs do not change its height (because tab div has style='height:55px'...)

    My sample with Container http://jsfiddle.net/andreyb89/CMtFB/2/

    Unfortunatly I can't know when my content div will change it's size, so I can't call .doLayout() every time content has been changed.

    Any suggestions? What am I doing wrong?

  2. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,011
    Vote Rating
    212
    Answers
    477
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Code:
    function addText() {
        Ext.ComponentQuery.query('tabpanel')[0].items.getAt(0).update('test test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test test ');
    }
    Ext.onReady(function() {
        var tabs = Ext.createWidget('tabpanel', {
            renderTo: 'tabs1',
            width: 450,
            activeTab: 0,
            defaults :{
                bodyPadding: 10
            },
            items: [{
                contentEl:'script', 
                title: 'Short Text',
                closable: true
            }]
        });
    })

  3. #3
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    0
    andreyb is on a distinguished road

      0  

    Default


    I can't control the way content is changed... Content is changing after user actions, and I don't know when it will happen and what will be changed

  4. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,011
    Vote Rating
    212
    Answers
    477
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


    Did my sample code not work for you?

  5. #5
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    0
    andreyb is on a distinguished road

      0  

    Default


    Did my sample code not work for you?
    No, because It is only in example content beeing changed during button onclick.
    In real application I have a page, logic of which I can't change, and I have to include this page in tab. Included page can change its height dinamically and I can't control code which change it. So I can't call ExtJS .update method.

    What I really need - is to force ExtJS do not set fixed height on tab div, that div must have 'height: auto' style or something similar.

  6. #6
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,050
    Vote Rating
    658
    Answers
    471
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    You need to trigger a layout on the outer component so it knows to measure the content:

    Code:
    function addText() {
        document.getElementById('script').innerHTML='test test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test testtest test test test test test ';
        window.foo.updateLayout();
    }
    
    Ext.onReady(function() {
        window.foo = Ext.create('Ext.container.Container', {
            layout: 'fit',
            renderTo: 'tabs1',
            items: [{
                xtype: 'tabpanel',
                width: 450,
                activeTab: 0,
                defaults :{
                    bodyPadding: 10
                },
                items: [{
                    contentEl:'script', 
                    title: 'Short Text',
                    closable: true
                }]
    		}]
        });
    });
    If you're just setting the HTML the component knows nothing about it. Depending on the browsers you're supporting, you may be able to listen to DOM mutation events.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  7. #7
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    0
    andreyb is on a distinguished road

      0  

    Default


    As I know in ExtJS 3 there was a way to set autoHeight: true. And do not worry about triggering a layout. That means this feature have been lost in ExtJS4? That's sad

Thread Participants: 2

Tags for this Thread