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

Fri Dec 12 11:12:22 EST 2008

darn, me too ... can you send you current page (complete)

Paul

On 12-Dec-08, at 11:07 AM, kde wrote:

>
> 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.
>
> _______________________________________________
> 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/