Skip to main content
C
chazman113
Inspiring
January 29, 2010
Answered

cflayout tabs help, cf 9 need to redraw to correct size with ext3 or CF

  • January 29, 2010
  • 5 replies
  • 8199 views

Whenever you load a tab dynamically with a cflayoutarea (tab) in Coldfusion 9 it won't get the height right (usually just does like 20px high). This will also happen when trying to reload a tab with coldfusion.navigate. I need to figure out how to access the underlying EXT or use coldfusion functions to get these tabs to redraw. As of now my only workaround is assigning a height to it, but that will create scrollbars instead of just correctly fitting the height as it should. Below is a example layoutarea:

<cflayout type="tab"  style="padding:5px; width:940px;" name="ajaxTabs">

     <cflayoutarea name="tab0" selected="#tab0#" style="padding:5px; min-height:450px;" overflow="auto" refreshonactivate="yes"
                         title="<p id='n1'>Saved Newsletters</p>"
                         source="#myself##xfa.savedNewsletters#" />

I've gotten the formula to get the layoutarea to react but haven't figured out exactly what I need to get it to resize (Below is just an attempt to jump start the height by disabling/enabling):

<cfsavecontent variable="theJS">
<script type="text/javascript">
function resizeTab() {
    var activeID = ColdFusion.Layout.getTabLayout('ajaxTabs').getActiveTab().id;
    ColdFusion.Layout.disableTab('ajaxTabs', activeID);
    ColdFusion.Layout.enableTab('ajaxTabs', activeID);
    ColdFusion.Layout.selectTab('ajaxTabs', activeID);
    return;
}
</script>
</cfsavecontent>
<cfhtmlhead text="#theJS#">
<cfset ajaxOnLoad('resizeTab')>

    This topic has been closed for replies.
    Correct answer MrTee

    Cool.  I've voted for it.

    --

    Adam


    Right, I have fixed it, I cannot guarantee that other cfajax functions wont be affected, but my tests so far show everything is ok.

    Basically I started taking a look through the CF Javascript files, and found the one that has all the CF functions which control the ExtJS functions. 

    After a bit of playing about, and then some whooping to the dismay of my colleagues, I managed to get the autoHeight working.

    What I found is the the Coldfusion code first creates a Tabpanel, but puts nothing in it, then for each tab you create it creates an Ext.Panel and puts that inside the tab.

    The autoHeight was being set on the tabpanel itself, however it was not being set on the Ext.Panel, and hence they were not resizing.

    I have added the parameter and everything seems to work, it even still works correctly should you want to specify a height.

    The file is in your inetpub/wwwroot/cfide/scripts/ajax/package (on windows) and is called cflayout.js

    Simply replace it with this one http://www.theidol.com/downloads/cflayout.js and you should find it works.

    You might want to backup your old file.

    The change I made is on line 70 and changed from

    var _70=new Ext.Panel({title:_6a,contentEl:_68,_cf_body:_68,id:_69,closable:_6c,tabTip:_6b,autoScroll:_6f,autoShow:true});

    to

    var _70=new Ext.Panel({title:_6a,contentEl:_68,_cf_body:_68,id:_69,closable:_6c,tabTip:_6b,autoScroll:_6f,autoShow:true,autoHeight:true});

    I hope this helps anyone with the same problem out.

    Adobe want a kicking for this ommission.

    Paul

    5 replies

    Fearless_image15A9
    Fearless_image15A9
    Participant
    March 20, 2015

    If you don't have a problem hardcoding the layout area height, then this solution works both in CF9 in CF11:

    <cflayout style="">

      <cflayoutarea style="overflow-y:scroll; height: 450px;">

    N
    NicholasDee
    Participating Frequently
    August 30, 2010

    This worked for me,

    cflayout.js file

    change    _1c.style.height=_1b;

    to          _1c.height=_1b; 

    A
    Anonymous
    April 15, 2010

    I got this problem too and found a different solution...

    Instead of using cflayoutarea source="blah.cfm"

    I included my source using cfinclude template="blah.cfm" in the body of the cflayoutarea

    This seems to work and avoids having to modify CF sourcecode.

    A
    Adam Cameron.
    Inspiring
    February 20, 2010

    Can you post some simple (but complete) and self-contained code that demonstrates what you're seeing?

    --

    Adam

    A
    Adam Cameron.
    Inspiring
    February 20, 2010

    No worries: got it.

    Yeah, looks like a bug in CF9.  Have you reported it?

    http://cfbugs.adobe.com/cfbugreport/flexbugui/cfbugtracker/main.html

    --

    Adam

    C
    chazman113Author
    Inspiring
    February 22, 2010

    Yes I did a while ago. Based on the number of bugs they have, doubt it will be any time soon. I'm guessing they will come out with a big update in a few months as they usually do, hopefully it will be in there!

    R
    reiters
    Participant
    February 18, 2010

    I could be totally wrong here but will placing

    <div style="clear:both; height: 0px;"></div>

    at the bottom of the new content being put in the tab help to push it down?

    C
    chazman113Author
    Inspiring
    February 19, 2010

    nah, just tried it. The problem appears to be it doesn't redraw it after it loads, so it has enough height for the little pinwheel, but thats it. Can't believe Adobe hasn't addressed this. I would expect it from PHP or some other open source software, but a software package that costs more than a used car?

    R
    reiters
    Participant
    February 19, 2010

    Ok so this is really ugly and I'm sure someone will have a better answer, but here is all I got.

    Put this at the bottom of the page that is being bound (binded?).

    <script type="text/javascript">
        document.getElementById('ext-gen17').style.height='auto';
    </script>

    There may be lots of negative reprocussions..no clue.  I know very little about CSS and EXTJS.  I do know how to dig around firebug

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices