PDA

View Full Version : Using Ext and cflayout tab



stang89
29 Dec 2009, 4:05 PM
Hello, I am having a lot of trouble. I have spent most of the day tracking down my problem to introducing a cflayout type=tab onto the page. Further, its once a cflayoutarea is entered in the cflayout (if its blank it still works). What is the problem? Also, when I went to debug in firebug, it works fine in firefox, so I guess this is just an IE problem, but I have to make it work in IE.

Now, I try to debug with IE, and I find the error on line 47 in cflayout.js.

var tab=_301.addTab(id,_303,null,_304);It says that addTab function does not exist, so I dont understand what the problem is. And, how is this a problem only when I have a cflayoutarea down under my cflayout type=tab?

I am in some real trouble here, please help point me in the right direction. Here is my code. Its mostly old stuff.



<link rel="stylesheet" type="text/css" href="include/ext-2.2/resources/css/ext-all.css" />

<script type="text/javascript" src="include/ext-2.2/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="include/ext-2.2/ext-all-debug.js"></script>

<!-- Tabs Example Files -->
<link rel="stylesheet" type="text/css" href="include/ext-2.2/examples/tabs/tabs-example.css" />


<!-- Common Styles for the examples -->
<!-- <link rel="stylesheet" type="text/css" href="include/ext-2.2/examples/shared/examples.css" />
<script type="text/javascript" src="include/ext-2.2/examples/shared/examples.js"></script> -->

<script type="text/javascript">
Ext.onReady(function(){

var win1;
var myImg = Ext.get('details1');

myImg.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win1){
win1 = new Ext.Window({
applyTo : 'row-win-1',
layout : 'fit',
width : 500,
height : 300,
closeAction :'hide',
plain : true,
items : new Ext.TabPanel({
applyTo : 'row1',
autoTabs : true,
activeTab : 0,
deferredRender : false,
border : false
}),
buttons: [{
text : 'Close',
handler : function(){
win1.hide();
}
}]
});
}
win1.show(myImg);
});
});
</script>
<img id="details" src="images/details.gif" onMouseOver="this.src='images/details_blue.gif'" onMouseOut="this.src='images/details.gif'" alt="Click to view additional information" border="0">&nbsp;&nbsp;

<div id="row-win-1" class="x-hidden">
<div class="x-window-header">Row x Details</div>
<div id="row1">
<!-- Auto create tab 1 -->
<div class="x-tab" title="Activities">
<p>Something</p>
</div>
<!-- Auto create tab 2 -->
<div class="x-tab" title="Activities2">
<p>Something 2</p>
</div>
<div class="x-tab" title="Activities3">
<p>Something 3</p>
</div>
</div>
</div>
...
<CFLAYOUT type="tab" name="myTabs" style="height:700;width=1000">
<cflayoutarea title="Hi">Hi</cflayoutarea>
</CFLAYOUT>
Interestingly, after the error, I then click and the js 'works'. I was going to ignore the problem for now, but my cflayout tabs dont load properly with this error, so I need to fix it. Maybe I am just missing an import? If you remove the cflayoutarea line, there is no error! Atleast not for me. Thanks in advance for any help.

aconran
29 Dec 2009, 6:15 PM
Use firebug to determine if CF is including additional copies of Ext JS which may be overriding the version you are including.

stang89
29 Dec 2009, 6:59 PM
Thanks for the point Aaron. I started looking into it, i guess it looks like when the cflayout is calling the cflayout.js function is where there is a problem. I am still unclear whats going on that its not working together though, I dont see a particular file stepping on another.

I did read about the changes in declaring tabPanels for ext 2.*. I have done that properly for my ext tab. That works on its own. Cflayout works on its own. But together, is there some confusion for Coldfusion to use its own definition for a cflayout? Does that use ext?

I thought I had it when I thought about your reply. But when I looked, I couldn't find an upgrade to the layout.js file in the ext/package folder. The only one I couldn't find! So maybe my problem is how to use cflayout with ext 2.0 and above?

stang89
30 Dec 2009, 5:25 PM
Well, I have been going over it, and I think that was the right track. It looks like an issue of ColdFusions cflayout using its inherent code, versus my importing ext2.2 for the ext.window.

I searched, and it seems the *core* extjs used by CF cannot be replaced outright by 2.2, so its stuck with 1.1 (which came with CF 8, which I am using). Why can cflayout not play with extjs 2.2?

As proof of concept I changed my Ext.Window from 2.2 down to 1.1 and they work together, so yes its the loading of different js. Am I stuck not being able ot use ext2.2 in CF8 and cflayout?