If you've tried nesting cflayouts in coldfusion 9 then you may have noticed that it breaks.

What seems to be happening is that the inner layouts are not being sized and fitted to their parent layouts and the page that they are on.

Coldfusion 9 uses the ExtJS 3 framework for its layouts, and Ext uses the doLayout() function on its objects to perform such an operation. It seems that CF9 is overlooking this, at least to some extent.

So as a workaround you could simply grab the layout and call its doLayout() function after the page has finished loading, right? And for this you can use the Ext.onReady() function. However, it seems that Ext.onReady() can fire before the layouts are loaded for some reason. I think it only happens within a Coldfusion environment, not when using Ext straight up.

How do you do it? Well it's a bit hackish, but you can use javascript's setTimeout() function to keep running a function that checks if the nested layouts exist before running doLayout() on them. See the following example.

<cflayout name="outerLayout" type="border"> 
    <cflayoutarea name="mainarea" position="center"> 
        <cflayout name="tabLayout" type="tab"> 
            <cflayoutarea name="tabA" title="Tab A"> 
                TAB A 
            </cflayoutarea> 
            <cflayoutarea name="tabB" title="Tab B"> 
                <cflayout type="border" name="tabABorderLayout"> 
                    <cflayoutarea name="tabA1" position="left"> 
                        A1 
                    </cflayoutarea> 
                    <cflayoutarea name="tabA2" position="center"> 
                        A2 
                    </cflayoutarea> 
                </cflayout> 
            </cflayoutarea> 
        </cflayout> 
    </cflayoutarea> 
</cflayout>  

And in your head section:

<script language="javascript"> 
    function setLayout(){ 
        try { 
            ColdFusion.Layout.getTabLayout("mainTabs").addListener('tabchange', function(){ 
                ColdFusion.Layout.getBorderLayout("tabABorderLayout").doLayout(); 
            }); 
        } catch (e) { 
            setTimeout("setLayout()",20); 
            //console.log("waiting..."); 
        } 
    }
    Ext.onReady(function(){ 
        setLayout(); 
    }); 
</script> 

Now, if anyone has a good suggestion as to a well-priced coldfusion host, I'd be happy to move to it so I can show some real examples!