[fusion-users] Nested JxSplitters which don't want to work

Fri Dec 12 11:07:30 EST 2008

Thanks Paul. Now I can see the second DIV (the red one) but not the third DIV
(the blue one).
I tried with several sizes but I can't make it work. The third DIV is too
little to be visible. It seems that the second DIV use all the heigh of the
window (it is what I see when I inspect the DOM tree of the page)

PS: I'm using Firefox 3

Paul Spencer-2 wrote:
> 
> Hi - you need to join the list if you want to post questions otherwise.
> 
> I just copied and pasted your code into an HTML file and loaded it and  
> I see a green rectangle covering the left half of the viewport and a  
> red rectangle covering the top right quarter and a blue rectangle  
> covering the bottom right.  However, this is not exactly what the code  
> is asking for.  The problem is that the splitters manage the content  
> areas but you are also creating Jx.Layout objects to manage the  
> content areas, so there is a confict.
> 
> Removing the extra Jx.Layout and the default options, the code should  
> look like:
> 
> <script type="text/javascript">
> var main;
> window.onload = function() {
>      main = new Jx.Layout('AppContainer', {
>          top: 2
>      });
>      var sa1 = new Jx.Layout('SplitterArea', {
>          left: 2,
>          right: 2,
>          top: 2,
>          bottom: 2
>      });
>      /* SPLITTER 1 */
>      var splitter = new Jx.Splitter('SplitterArea', {
> 		elements: [$('Si'), $('SplitterArea2')],
> 		containerOptions: [{width: 200}, null]
> 	});
> 	/* SPLITTER 2 */
>      var splitter2 = new Jx.Splitter('SplitterArea2',{
>          elements:[$('Ma'), $('De')],
>          layout:'vertical',
> 		containerOptions: [{height: 200}, null]
> 	});
>      main.resize();
> }
> </script>
> 
> Cheers
> 
> Paul
> 
> 
> On 12-Dec-08, at 6:56 AM, kde wrote:
> 
>>
>> Hi everybody,
>>
>> I have a blocking problem with Jx and its Splitters.
>> I want the split horizontaly the page in 2 parts and split the  
>> second parts
>> verticaly in 2.
>> But when I load this simpliest code (this html file is wel located  
>> in a
>> fusion template folder with all required xml/css/images (I use a  
>> copy of
>> "Slate")), I see only the "Si" DIV (the green one).
>>
>> -------------------------------------------------------------------------------------------------
>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>> "http://www.w3.org/TR/html4/strict.dtd">
>> <html>
>> <head>
>> <title>Test</title>
>> <meta http-equiv="Content-type" content="text/html; charset=utf-8">
>> <script type="text/javascript" src="../../../lib/fusion.js"></script>
>>
>> <script type="text/javascript">
>> var main;
>> window.onload = function() {
>>
>>  main = new Jx.Layout('AppContainer', {left: 0, right: 0, top: 2,  
>> bottom:
>> 0});
>>  var sa1 = new Jx.Layout('SplitterArea', {left: 2, right: 2, top: 2,
>> bottom: 2});
>>  var si = new Jx.Layout('Si', {});
>>  var sa2 = new Jx.Layout('SplitterArea2', {});
>>  var ma = new Jx.Layout('Ma', {});
>>  var de = new Jx.Layout('De', {});
>>
>>
>>  /* SPLITTER 1 */
>>
>>  var splitter = new Jx.Splitter('SplitterArea',
>>                                 {splitInto:2,
>> 								 elements: [$('Si'), $('SplitterArea2')],
>>                                 layout:'horizontal',
>> 								 containerOptions: [{width: 200}, null]
>> 								 });
>> 								
>>
>>  /* SPLITTER 2 */
>>  var splitter2 = new Jx.Splitter('SplitterArea2',
>>                                 {splitInto:2,
>>                                 elements:[$('Ma'), $('De')],
>>                                 layout:'vertical',
>> 								 containerOptions: [{height: 200}, null]
>> 								 });
>>
>>
>>
>>  main.resize();
>>  }
>> </script>
>>
>> <style type="text/css">
>> @import url(css/jxskin-border.css);
>> @import url(css/dialog_forms.css);
>> @import url(css/slate_fusion.css);
>> </style>
>>
>>
>> <!--[if IE 7]>
>> <style>
>> @import url(css/slate_ie7.css);
>> </style>
>> <![endif]-->
>>
>> </head>
>>
>> <body>
>>
>> <div id="AppContainer">
>>
>>  <div id="SplitterArea">
>>    <div id="Si" style="BACKGROUND-COLOR: green;">
>>    </div>
>>    <div id="SplitterArea2">
>> 		
>> 		<div id="Ma" style="BACKGROUND-COLOR: red;">
>> 		</div>
>> 		
>> 		<div id="De" style="BACKGROUND-COLOR: blue;">
>> 	    </div>
>> 	</div>
>>  </div>
>>
>> </div>
>> </body>
>> </html>
>>
>> -------------------------------------------------------------------------------------------------
>>
>> What is wrong in this code?
>>
>> Thanks in advance for your suggestion
>> -- 
>> View this message in context:
>> http://n2.nabble.com/Nested-JxSplitters-which-don%27t-want-to-work-tp1647461p1647461.html
>> Sent from the Fusion Users mailing list archive at Nabble.com.
>>
>> _______________________________________________
>> fusion-users mailing list
>> fusion-users at lists.osgeo.org
>> http://lists.osgeo.org/mailman/listinfo/fusion-users
> 
> 
> __________________________________________
> 
>     Paul Spencer
>     Chief Technology Officer
>     DM Solutions Group Inc
>     http://research.dmsolutions.ca/
> 
> _______________________________________________
> fusion-users mailing list
> fusion-users at lists.osgeo.org
> http://lists.osgeo.org/mailman/listinfo/fusion-users
> 
> 

-- 
View this message in context: http://n2.nabble.com/Nested-JxSplitters-which-don%27t-want-to-work-tp1647461p1648372.html
Sent from the Fusion Users mailing list archive at Nabble.com.