Results 1 to 7 of 7

Thread: Autoheight tabPanel when tab content changed

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    0
      0  

    Default 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,154
    Answers
    501
    Vote Rating
    249
      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
      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,154
    Answers
    501
    Vote Rating
    249
      0  

    Default

    Did my sample code not work for you?

  5. #5
    Sencha User
    Join Date
    Jan 2013
    Posts
    4
    Vote Rating
    0
      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
    18,434
    Answers
    651
    Vote Rating
    859
      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!

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
  •