1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>qooxdoo » Demo</title>
<link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
<!--[if IE]>
<link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
<![endif]-->
<script type="text/javascript" src="../../script/qx.js"></script>
</head>
<body>
<script type="text/javascript" src="../../script/layout.js"></script>
<div id="demoDescription">
<p>A simple form using qx.ui.layout.GridLayout</p>
<p>Using padding instead of spacing. Spacing is between the cells, padding is inside the cells. The same layout using padding is always bigger because the first and last cells are also affected with the padding to the edge.</p>
</div>
<script type="text/javascript">
qx.core.Init.getInstance().defineMain(function()
{
var gl = new qx.ui.layout.GridLayout;
gl.setLocation(20, 48);
gl.setDimension("auto", "auto");
gl.setBorder(qx.renderer.border.BorderPresets.getInstance().outset);
gl.setPadding(8);
gl.setColumnCount(2);
gl.setRowCount(7);
gl.setColumnWidth(0, 76);
gl.setColumnWidth(1, 186);
gl.setColumnHorizontalAlignment(0, "right");
gl.setColumnVerticalAlignment(0, "middle");
gl.setRowHeight(0, 24);
gl.setRowHeight(1, 24);
gl.setRowHeight(2, 24);
gl.setRowHeight(3, 24);
gl.setRowHeight(4, 24);
gl.setRowHeight(5, 74);
gl.setRowHeight(6, 24);
gl.setCellPaddingTop(2);
gl.setCellPaddingRight(3);
gl.setCellPaddingBottom(2);
gl.setCellPaddingLeft(3);
/*
// the same like the above, but more local
gl.setColumnPaddingTop(0, 2);
gl.setColumnPaddingRight(0, 3);
gl.setColumnPaddingBottom(0, 2);
gl.setColumnPaddingLeft(0, 3);
gl.setColumnPaddingTop(1, 2);
gl.setColumnPaddingRight(1, 3);
gl.setColumnPaddingBottom(1, 2);
gl.setColumnPaddingLeft(1, 3);
*/
qx.ui.core.ClientDocument.getInstance().add(gl);
var label1 = new qx.ui.basic.Label("Given Name");
var label2 = new qx.ui.basic.Label("Name");
var label3 = new qx.ui.basic.Label("City");
var label4 = new qx.ui.basic.Label("Country");
var label5 = new qx.ui.basic.Label("E-Mail");
var label6 = new qx.ui.basic.Label("Comment");
label6.setVerticalAlign("top");
var input1 = new qx.ui.form.TextField;
var input2 = new qx.ui.form.TextField;
var input3 = new qx.ui.form.ComboBox;
var input4 = new qx.ui.form.TextField;
var input5 = new qx.ui.form.TextField;
var input6 = new qx.ui.form.TextArea;
var input7 = new qx.ui.form.Button("Submit", "icon/16/apply.png");
input3.add(new qx.ui.form.ListItem("New York"));
input3.add(new qx.ui.form.ListItem("Paris"));
input3.add(new qx.ui.form.ListItem("Sydney"));
input3.add(new qx.ui.form.ListItem("Berlin"));
input3.add(new qx.ui.form.ListItem("Washington"));
input7.setHorizontalAlign("right");
gl.add(label1, 0, 0);
gl.add(input1, 1, 0);
gl.add(label2, 0, 1);
gl.add(input2, 1, 1);
gl.add(label3, 0, 2);
gl.add(input3, 1, 2);
gl.add(label4, 0, 3);
gl.add(input4, 1, 3);
gl.add(label5, 0, 4);
gl.add(input5, 1, 4);
gl.add(label6, 0, 5);
gl.add(input6, 1, 5);
gl.add(input7, 1, 6);
});
</script>
</body>
</html>
|
