3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4 <title>qooxdoo » Demo</title>
5 <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
7 <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
9 <script type="text/javascript" src="../../script/qx.js"></script>
12 <script type="text/javascript" src="../../script/layout.js"></script>
14 <div id="demoDescription">
15 Same as the previous one, but additional the dimensions of the qx.ui.layout.DockLayout are defined as percents here.
18 <script type="text/javascript">
19 qx.core.Init.getInstance().defineMain(function()
21 var d = qx.ui.core.ClientDocument.getInstance();
23 var dl1 = new qx.ui.layout.DockLayout;
30 dl1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
31 dl1.setBackgroundColor("white");
37 var t1 = new qx.ui.layout.HorizontalBoxLayout;
39 t1.setBackgroundColor("red");
41 t1.setVerticalChildrenAlign("middle");
42 t1.setHorizontalChildrenAlign("center");
43 t1.add(new qx.ui.basic.Image("icon/16/clock.png"));
46 var t2 = new qx.ui.layout.HorizontalBoxLayout;
48 t2.setBackgroundColor("yellow");
50 t2.setVerticalChildrenAlign("middle");
51 t2.setHorizontalChildrenAlign("center");
52 t2.add(new qx.ui.basic.Image("icon/16/clock.png"));
55 var t3 = new qx.ui.layout.HorizontalBoxLayout;
57 t3.setBackgroundColor("blue");
59 t3.setVerticalChildrenAlign("middle");
60 t3.setHorizontalChildrenAlign("center");
61 t3.add(new qx.ui.basic.Image("icon/16/clock.png"));
64 var t4 = new qx.ui.layout.HorizontalBoxLayout;
66 t4.setBackgroundColor("green");
68 t4.setVerticalChildrenAlign("middle");
69 t4.setHorizontalChildrenAlign("center");
70 t4.add(new qx.ui.basic.Image("icon/16/clock.png"));
76 var dl2 = new qx.ui.layout.DockLayout;
77 dl2.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
86 var t5 = new qx.ui.layout.HorizontalBoxLayout;
88 t5.setBackgroundColor("fuchsia");
90 t5.setVerticalChildrenAlign("middle");
91 t5.setHorizontalChildrenAlign("center");
92 t5.add(new qx.ui.basic.Image("icon/32/clock.png"));
95 var t6 = new qx.ui.layout.HorizontalBoxLayout;
97 t6.setBackgroundColor("orange");
99 t6.setVerticalChildrenAlign("middle");
100 t6.setHorizontalChildrenAlign("center");
101 t6.add(new qx.ui.basic.Image("icon/32/clock.png"));
104 var t7 = new qx.ui.layout.HorizontalBoxLayout;
106 t7.setBackgroundColor("aqua");
108 t7.setVerticalChildrenAlign("middle");
109 t7.setHorizontalChildrenAlign("center");
110 t7.add(new qx.ui.basic.Image("icon/32/clock.png"));
113 var t8 = new qx.ui.layout.HorizontalBoxLayout;
115 t8.setBackgroundColor("lime");
117 t8.setVerticalChildrenAlign("middle");
118 t8.setHorizontalChildrenAlign("center");
119 t8.add(new qx.ui.basic.Image("icon/32/clock.png"));
126 var hb1 = new qx.ui.layout.HorizontalBoxLayout;
128 hb1.setBackgroundColor("silver");
129 hb1.setVerticalChildrenAlign("middle");
130 hb1.setHorizontalChildrenAlign("center");
131 hb1.setBorder(qx.renderer.border.BorderPresets.getInstance().black);
134 hb1.add(new qx.ui.basic.Image("icon/64/clock.png"));