[fusion-users] Nested JxSplitters which don't want to work
kde
kdelcroix at celsius-tech.com
Fri Dec 12 11:29:18 EST 2008
Here is the current page :
-----------------------------------------------------------------------------------------------
<!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', {
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')],
layout:'horizontal',
containerOptions: [{width: 200}]
});
/* SPLITTER 2 */
var splitter2 = new Jx.Splitter('SplitterArea2',
{
elements:[$('Ma'), $('De')],
layout:'vertical',
containerOptions: [{height: 200}, {height: auto}]
});
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>
-----------------------------------------------------------------------------------------------
Thanks for your help!
Kevin
Paul Spencer-2 wrote:
>
> 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/
>
> _______________________________________________
> 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-tp1647461p1648529.html
Sent from the Fusion Users mailing list archive at Nabble.com.
More information about the fusion-users
mailing list