diff options
Diffstat (limited to 'webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ComboBoxEx_1.html')
| -rw-r--r-- | webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ComboBoxEx_1.html | 230 |
1 files changed, 230 insertions, 0 deletions
diff --git a/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ComboBoxEx_1.html b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ComboBoxEx_1.html new file mode 100644 index 0000000000..ea628b89be --- /dev/null +++ b/webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ComboBoxEx_1.html @@ -0,0 +1,230 @@ +<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> + <script type="text/javascript"> + +function getTestData() { + var testData = [ + [ '1', 'One' ], + [ '2', 'Two' ], + [ '3', 'Three' ], + [ '4', 'Four' ], + [ '5', 'Five' ], + [ '6', 'Six' ], + [ '7', 'Seven' ], + [ '8', 'Eight' ], + [ '9', 'Nine' ], + [ '10', 'Ten' ], + [ '11', 'Eleven' ], + [ '12', 'Twelve' ], + [ '13', 'Thirteen' ], + [ '14', 'Fourteen' ], + [ '15', 'Fiveteen' ], + [ '16', 'Sixteen' ], + [ '17', 'Seventeen' ], + // Test of a long string + [ '1921', 'One thousand nine hundred twenty one' ] + ]; + for (var i = 0; i < testData.length; i++) { + testData[i].push('widget/arrows/'+(i % 2 ? 'up':'down')+'_small.gif'); + testData[i].push('Extra data '+i); + } + return testData; +} + +qx.OO.defineClass('Box', qx.ui.layout.BoxLayout, function() { + qx.ui.layout.BoxLayout.apply(this, arguments); + this.auto(); +}); + +qx.OO.defineClass('GroupBox', qx.ui.groupbox.GroupBox, function() { + qx.ui.groupbox.GroupBox.apply(this, arguments); + this.auto(); +}); + +qx.core.Init.getInstance().defineMain(function() { + // Shortcuts + var form = qx.ui.form; + Label = qx.ui.basic.Label; + var testData = getTestData(); + + //###1st row: combo + + combo = new form.ComboBoxEx; + var butSize = new form.Button('Size text field to content'); + butSize.addEventListener('execute', function() { + combo.sizeTextFieldToContent(); + }); + + var boxCombo2 = new Box; + with (boxCombo2) { + setSpacing(10); + add(combo, butSize); + } + var boxCombo = new GroupBox('This is the ComboBoxEx under test'); + boxCombo.add(boxCombo2); + + //###2nd row: Test of simple properties + var cEd = new form.CheckBox('Editable'); + cEd.setChecked(combo.getEditable()); + cEd.addEventListener('changeChecked', function() { + combo.setEditable(cEd.isChecked()); + }); + + var cEnsure = new form.CheckBox('Ensure something selected'); + cEnsure.setChecked(combo.getEnsureSomethingSelected()); + cEnsure.addEventListener('changeChecked', function() { + combo.setEnsureSomethingSelected(cEnsure.isChecked()); + }); + + var cAllowSearch = new form.CheckBox('Allow searching'); + cAllowSearch.setChecked(combo.getAllowSearch()); + cAllowSearch.addEventListener('changeChecked', function() { + combo.setAllowSearch(cAllowSearch.isChecked()); + }); + + var cIdCol = new form.CheckBox('ID column visible'); + cIdCol.setChecked(combo.isIdColumnVisible()); + cIdCol.addEventListener('changeChecked', function() { + combo.setIdColumnVisible(cIdCol.isChecked()); + }); + + var fieldItems = new form.Spinner(0, 0, testData.length); + fieldItems._manager.addEventListener('changeValue', function() { + var sel = [], count = fieldItems.getValue(); + for (var i = 0; i < count; i++) { + sel.push(testData[i]); + } + combo.setSelection(sel); + }); + fieldItems.setValue(15); + + var boxProp2 = new Box; + with (boxProp2) { + setSpacing(10); + add(cEd, cEnsure, cAllowSearch, cIdCol, new Label('Number of items in list'), fieldItems); + } + var boxProp = new GroupBox('Test of simple properties'); + boxProp.add(boxProp2); + + //###Test of headers + var allHeaders = [ 'ID', 'Description', 'Img', 'Extra info' ]; + var rb1 = new form.RadioButton('1', '1'); + var rb2 = new form.RadioButton('2', '2'); + rb2.setChecked(true); + var rb3 = new form.RadioButton('3', '3'); + var rb4 = new form.RadioButton('4', '4'); + + var fieldHeaders = new qx.manager.selection.RadioManager('headers', [ rb1, rb2, rb3, rb4 ]); + fieldHeaders.addEventListener("changeSelected", function(e) { + var headers = [], count = Number(e.getData().getValue()); + for (var i = 0; i < count; i++) { + headers.push(allHeaders[i]); + } + combo.setColumnHeaders(headers); + }); + + var butChangeHeaders = new form.Button('Add * to headers'); + // This tests changing the headers, but not the number of columns + butChangeHeaders.addEventListener('execute', function() { + var headers = combo.getColumnHeaders(); + for (var i = 0; i < headers.length; i++) { + headers[i] += '*'; + } + combo.setColumnHeaders(headers); + }); + + var boxHeaders2 = new Box; + with (boxHeaders2) { + setSpacing(10); + add(new Label('# of headers'), rb1, rb2, rb3, rb4, butChangeHeaders); + } + var boxHeaders = new GroupBox('Test headers'); + boxHeaders.add(boxHeaders2); + + var fieldMaxRows = new form.Spinner(2, combo.getMaxVisibleRows(), 20); + fieldMaxRows._manager.addEventListener('changeValue', function() { + combo.setMaxVisibleRows(fieldMaxRows.getValue()); + }); + var boxMaxRows = new GroupBox('Max. number of visible rows'); + boxMaxRows.add(fieldMaxRows); + + var boxRow3 = new Box; + boxRow3.add(boxHeaders, boxMaxRows); + + //###Test of showOnTextField + var rbDesc = new form.RadioButton('Description', 'description'); + rbDesc.setChecked(true); + var rbIdAndDesc = new form.RadioButton('ID and description', 'idAndDescription'); + var fieldShowOn = new qx.manager.selection.RadioManager("showOnTextField", [ rbDesc, rbIdAndDesc ]); + fieldShowOn.addEventListener("changeSelected", function(e) { + combo.setShowOnTextField(e.getData().getValue()); + }); + + var fieldSeparator = new form.TextField; + fieldSeparator.setValue(combo.getIdDescriptionSeparator()); + fieldSeparator.setWidth(50); + fieldSeparator.addEventListener('changeValue', function() { + combo.setIdDescriptionSeparator(fieldSeparator.getValue()); + }); + var boxShowOn2 = new Box; + with (boxShowOn2) { + setSpacing(10); + add(new Label('Show on text field:'), rbDesc, rbIdAndDesc, new Label('Separator between ID and description:'), fieldSeparator); + } + var boxShowOn = new GroupBox('Test showOnTextField property'); + boxShowOn.add(boxShowOn2); + + //###Test of get/setValue + var fieldValue = new form.TextField; + var butSetValue = new form.Button('Set'); + butSetValue.addEventListener('execute', function() { + combo.setValue(fieldValue.getValue()); + }); + var butGetValue = new form.Button('Get'); + butGetValue.addEventListener('execute', function() { + fieldValue.setValue(combo.getValue()); + }); + var boxVal2 = new Box; + with (boxVal2) { + setSpacing(10); + add(fieldValue, butSetValue, butGetValue); + } + var boxVal = new GroupBox('Test value property'); + boxVal.add(boxVal2); + + //###Main box + var vbox = new Box('vertical'); + with (vbox) { + setSpacing(10); + setTop(50); + setLeft(30); + add(boxCombo, boxProp, boxRow3, boxShowOn, boxVal); + addToDocument(); + } + combo.focus(); +}); + </script> +</head> +<body> + <script type="text/javascript" src="../../script/layout.js"></script> + <script type="text/javascript"> +if (console.debug) { + with (qx.dev.log.Logger.ROOT_LOGGER) { + removeAllAppenders(); + addAppender(new qx.dev.log.FireBugAppender); + setMinLevel(qx.dev.log.Logger.LEVEL_WARN); + } +} + </script> + <div id="demoDescription"> + <p>ComboBoxEx is an enhanced version of ComboBox</p> + </div> +</body> +</html>
\ No newline at end of file |