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

Fri Dec 12 09:08:48 EST 2008

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/