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

[chazman113]

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')>

[reiters]

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?

[chazman113]

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?

[reiters]

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

[chazman113]

No biggie, thanks for your suggestions! For now I'm living with having a set height with overflow (ugly). I really shouldn't have committed software to coldfusion's built in AJAX in the first place, I'm trying as hard as I can to convert everything to jquery, but there is a lot to do!

[reiters]

Hmmm...Just after posting I decided to try it with more than one tab.  It only controls the first tab when more than one, but maybe their's some minor changes that fixes it.

[Adam Cameron.]

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

--

Adam

[Adam Cameron.]

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

[chazman113]

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!

[MrTee]

Hi

I am having exactley the same problem having just moved from cf8...

Did you managed to find a way of triggering the tab to resize at all, its driving me mad.

Paul

[chazman113]

No answer yet, I have set a min-height attribute on all my tabs for now.

[Adam Cameron.]

Yes I did a while ago.

Um... right... what was the bug number?

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!

Yes, there will be an updater at some point before too long.

One way to ensure you get your bugs as much attention as possible is to let people know about them, so if they have the same problem they can vote for the bug.  The more votes... the more likely it is to get fixed.  "The squeaky wheel [etc]..."

--

Adam

[chazman113]

Good question. Looking, but once I sign in it doesn't have an area for "my tickets" nor can I search by my name, am I missing something?

-Charley

[Adam Cameron.]

Good question. Looking, but once I sign in it doesn't have an area for "my tickets" nor can I search by my name, am I missing something?

Yeah, it's not the best issue tracking system in the world.  Trust me... people have been on at them about this.

Um... I always include my name in the body of the bug description... not much use to you now, but maybe for future reference.

There's only 58 issues mentioning cflayout... surely it can't be that hard for you to find? 😉

(yes, I'm sure I could find it as well!)

--

Adam

[chazman113]

80421. Ah, I had submitted a bug that was more general, requesting backwards compat with the older ext library. At the time I was really really wanting to use the 64-bit edition but couldn't upgrade my apps because they simply were jacked up in cf9. After changing a lot of styles and js in the EXT core, and coming up with some workarounds, I got to this point. I'll resubmit a specific ticket.

[chazman113]

Posted 82192

[Adam Cameron.]

Cool.  I've voted for it.

--

Adam

[MrTee · Accepted solution]

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

[Adam Cameron.]

Hey, good work!

🙂

--

Adam

[chazman113]

Awesome! This really helps me out a lot, thank you for posting your fix. I can't believe adobe would let something so glaringly wrong go live, as of now I've had to modify 5 CFIDE files for fixes that should have been done right the first time!

[TwoEdge]

On Edit: I applied Paul's fix above and it seems to be working well now.!

I have the same issue and I voted for the bug. Thanks for the temp fix, Paul. Has anyone seen any problems with the fix after applying it?

Message was edited by: TwoEdge

[phil_ashby]

Exactly what I was looking for - superb!

Thanks

[mat1492]

Great catch. I was having all kinds of height issues with tabs and this fixed it. Thanks

[dePIXion]

Thank you.  That works!

[JupiterLusitano]

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.