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 <p>Test the setting of background color of form fields.</p>
18 <script type="text/javascript">
19 function changeBackgrounds(parent, color)
21 var children = parent.getChildren();
24 for (var i=0; i<children.length; i++)
28 switch(child.classname)
30 case 'qx.ui.form.TextArea':
31 case 'qx.ui.form.TextField':
32 case 'qx.ui.form.ComboBox':
33 case 'qx.ui.form.PasswordField':
34 child.setBackgroundColor(color);
40 qx.core.Init.getInstance().defineMain(function()
42 var d = qx.ui.core.ClientDocument.getInstance();
44 function textChange(e) {
45 this.debug("Text changed: " + e.getData());
48 var t1 = new qx.ui.form.TextField;
49 t1.setValue("textfield");
53 t1.addEventListener("changeText", textChange);
54 t1.addEventListener("input", function(e) {
55 this.debug("Input: " + e.getData());
63 var t2 = new qx.ui.form.PasswordField;
64 t2.setValue("passwordfield");
68 t2.addEventListener("changeText", textChange);
73 var t3 = new qx.ui.form.TextArea;
74 t3.setValue("textarea");
80 t3.addEventListener("changeText", textChange);
85 var t4 = new qx.ui.form.TextField;
86 t4.setValue("textfield");
93 t4.addEventListener("changeText", textChange);
98 var t5 = new qx.ui.form.TextField;
99 t5.setValue("You are foo!");
103 t5.addEventListener("changeText", textChange);
107 var c1 = new qx.ui.form.ComboBox;
111 c1.addEventListener("beforeInitialOpen", function(e)
115 for(var i=1; i<=30; i++)
117 item = new qx.ui.form.ListItem("Item No " + i);
118 !(i % 10) && (item.setEnabled(false));
123 // this does not work here (if there is no content)
124 c1.setSelected(c1.getList().getFirstChild());
126 c1.addEventListener("changeValue", function(e) {
127 this.debug("New value: " + e.getData());
130 c1.addEventListener("changeSelected", function(e) {
131 this.debug("New selected: " + e.getData());
137 var b1 = new qx.ui.form.CheckBox("Editable");
139 b1.set({ top: 282, left: 150 });
141 b1.addEventListener("changeChecked", function(e) {
142 c1.setEditable(e.getData());
146 var b2 = new qx.ui.form.Button("red", "icon/16/colors.png"); b2.set({left:10,top:10});
147 var b3 = new qx.ui.form.Button("green", "icon/16/colors.png"); b3.set({left:10,top:40});
148 var b4 = new qx.ui.form.Button("white", "icon/16/colors.png"); b4.set({left:10,top:70});
150 b2.addEventListener("click", function(e) { changeBackgrounds(d,this.getLabel()); });
151 b3.addEventListener("click", function(e) { changeBackgrounds(d,this.getLabel()); });
152 b4.addEventListener("click", function(e) { changeBackgrounds(d,this.getLabel()); });
154 var fs = new qx.ui.groupbox.GroupBox("BackgroundColor");
155 fs.set({left:400,top:50,width:150,height:"auto"});
170 qx.manager.object.ColorManager.getInstance().createThemeList(d, 20, 320);