3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>qooxdoo » Demo » Sample</title>
5 <link type="text/css" rel="stylesheet" href="../../css/layout.css"/>
7 <link type="text/css" rel="stylesheet" href="../../css/layout_ie.css"/>
9 <script type="text/javascript" src="../../script/sample.js"></script>
12 <script type="text/javascript" src="../../script/layout.js"></script>
14 <div id="demoDescription">
15 <p>Test for extra slim Splitpane, with holding knobs.</p>
18 <script type="text/javascript">
20 qx.core.Init.getInstance().defineMain(function()
22 var frame = new qx.ui.layout.CanvasLayout;
23 frame.setLocation(20, 48);
26 frame.setBackgroundColor("#134275");
28 frame.addToDocument();
30 // the splitpane itself
31 var splitpane = new qx.ui.splitpane.HorizontalSplitPane("1*", "2*");
33 splitpane.setSplitterSize(1);
34 splitpane.setShowKnob(true);
38 var leftWidget = new qx.ui.form.TextArea("LeftWidget");
39 leftWidget.setWrap(true);
40 leftWidget.setBackgroundColor(new qx.renderer.color.Color("white"));
41 leftWidget.setWidth("100%");
42 leftWidget.setHeight("100%");
44 // rightWidget (another splitpane)
45 var rightWidget = new qx.ui.splitpane.VerticalSplitPane;
46 rightWidget.setHeight("100%");
47 rightWidget.setWidth("100%");
48 rightWidget.setSplitterSize(1);
49 rightWidget.setShowKnob(true);
52 // add widgets to splitpane
53 splitpane.addLeft(leftWidget);
54 splitpane.addRight(rightWidget);
59 var topWidget = new qx.ui.form.TextArea("Right Top Widget");
60 topWidget.setBackgroundColor(new qx.renderer.color.Color("white"));
61 topWidget.setHeight("100%");
62 topWidget.setWidth("100%");
64 // right bottom widget
65 var bottomWidget = new qx.ui.embed.Iframe("http://www.qooxdoo.org");
66 bottomWidget.setHeight("100%");
67 bottomWidget.setWidth("100%");
69 // add widgets to right splitpane
70 rightWidget.addTop(topWidget);
71 rightWidget.addBottom(bottomWidget);