webapps/qooxdoo-0.6.3-sdk/frontend/demo/source/html/example/ComboBoxEx_1.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>qooxdoo &raquo; Demo</title>
   5   <link type="text/css" rel="stylesheet" href="../../resource/css/layout.css"/>
   6   <!--[if IE]>
   7   <link type="text/css" rel="stylesheet" href="../../resource/css/layout_ie.css"/>
   8   <![endif]-->
   9   <script type="text/javascript" src="../../script/qx.js"></script>
  10   <script type="text/javascript">
  11
  12 function getTestData() {
  13         var testData = [
  14                 [ '1', 'One' ],
  15                 [ '2', 'Two' ],
  16                 [ '3', 'Three' ],
  17                 [ '4', 'Four' ],
  18                 [ '5', 'Five' ],
  19                 [ '6', 'Six' ],
  20                 [ '7', 'Seven' ],
  21                 [ '8', 'Eight' ],
  22                 [ '9', 'Nine' ],
  23                 [ '10', 'Ten' ],
  24                 [ '11', 'Eleven' ],
  25                 [ '12', 'Twelve' ],
  26                 [ '13', 'Thirteen' ],
  27                 [ '14', 'Fourteen' ],
  28                 [ '15', 'Fiveteen' ],
  29                 [ '16', 'Sixteen' ],
  30                 [ '17', 'Seventeen' ],
  31                 // Test of a long string
  32                 [ '1921', 'One thousand nine hundred twenty one' ]
  33         ];
  34         for (var i = 0; i < testData.length; i++) {
  35                 testData[i].push('widget/arrows/'+(i % 2 ? 'up':'down')+'_small.gif');
  36                 testData[i].push('Extra data '+i);
  37         }
  38         return testData;
  39 }
  40
  41 qx.OO.defineClass('Box', qx.ui.layout.BoxLayout, function() {
  42         qx.ui.layout.BoxLayout.apply(this, arguments);
  43         this.auto();
  44 });
  45
  46 qx.OO.defineClass('GroupBox', qx.ui.groupbox.GroupBox, function() {
  47         qx.ui.groupbox.GroupBox.apply(this, arguments);
  48         this.auto();
  49 });
  50
  51 qx.core.Init.getInstance().defineMain(function() {
  52         // Shortcuts
  53         var form = qx.ui.form;
  54         Label = qx.ui.basic.Label;
  55         var testData = getTestData();
  56
  57         //###1st row: combo
  58
  59         combo = new form.ComboBoxEx;
  60         var butSize = new form.Button('Size text field to content');
  61         butSize.addEventListener('execute', function() {
  62                 combo.sizeTextFieldToContent();
  63         });
  64
  65         var boxCombo2 = new Box;
  66         with (boxCombo2) {
  67                 setSpacing(10);
  68                 add(combo, butSize);
  69         }
  70         var boxCombo = new GroupBox('This is the ComboBoxEx under test');
  71         boxCombo.add(boxCombo2);
  72
  73         //###2nd row: Test of simple properties
  74         var cEd = new form.CheckBox('Editable');
  75         cEd.setChecked(combo.getEditable());
  76         cEd.addEventListener('changeChecked', function() {
  77                 combo.setEditable(cEd.isChecked());
  78         });
  79
  80         var cEnsure = new form.CheckBox('Ensure something selected');
  81         cEnsure.setChecked(combo.getEnsureSomethingSelected());
  82         cEnsure.addEventListener('changeChecked', function() {
  83                 combo.setEnsureSomethingSelected(cEnsure.isChecked());
  84         });
  85
  86         var cAllowSearch = new form.CheckBox('Allow searching');
  87         cAllowSearch.setChecked(combo.getAllowSearch());
  88         cAllowSearch.addEventListener('changeChecked', function() {
  89                 combo.setAllowSearch(cAllowSearch.isChecked());
  90         });
  91
  92         var cIdCol = new form.CheckBox('ID column visible');
  93         cIdCol.setChecked(combo.isIdColumnVisible());
  94         cIdCol.addEventListener('changeChecked', function() {
  95                 combo.setIdColumnVisible(cIdCol.isChecked());
  96         });
  97
  98         var fieldItems = new form.Spinner(0, 0, testData.length);
  99         fieldItems._manager.addEventListener('changeValue', function() {
 100                 var sel = [], count = fieldItems.getValue();
 101                 for (var i = 0; i < count; i++) {
 102                         sel.push(testData[i]);
 103                 }
 104                 combo.setSelection(sel);
 105         });
 106         fieldItems.setValue(15);
 107
 108         var boxProp2 = new Box;
 109         with (boxProp2) {
 110                 setSpacing(10);
 111                 add(cEd, cEnsure, cAllowSearch, cIdCol, new Label('Number of items in list'), fieldItems);
 112         }
 113         var boxProp = new GroupBox('Test of simple properties');
 114         boxProp.add(boxProp2);
 115
 116         //###Test of headers
 117         var allHeaders = [ 'ID', 'Description', 'Img', 'Extra info' ];
 118         var rb1 = new form.RadioButton('1', '1');
 119         var rb2 = new form.RadioButton('2', '2');
 120     rb2.setChecked(true);
 121         var rb3 = new form.RadioButton('3', '3');
 122         var rb4 = new form.RadioButton('4', '4');
 123
 124         var fieldHeaders = new qx.manager.selection.RadioManager('headers', [ rb1, rb2, rb3, rb4 ]);
 125         fieldHeaders.addEventListener("changeSelected", function(e) {
 126                 var headers = [], count = Number(e.getData().getValue());
 127                 for (var i = 0; i < count; i++) {
 128                         headers.push(allHeaders[i]);
 129                 }
 130                 combo.setColumnHeaders(headers);
 131     });
 132
 133     var butChangeHeaders = new form.Button('Add * to headers');
 134     // This tests changing the headers, but not the number of columns
 135     butChangeHeaders.addEventListener('execute', function() {
 136                 var headers = combo.getColumnHeaders();
 137                 for (var i = 0; i < headers.length; i++) {
 138                         headers[i] += '*';
 139                 }
 140                 combo.setColumnHeaders(headers);
 141     });
 142
 143         var boxHeaders2 = new Box;
 144         with (boxHeaders2) {
 145                 setSpacing(10);
 146                 add(new Label('# of headers'), rb1, rb2, rb3, rb4, butChangeHeaders);
 147         }
 148         var boxHeaders = new GroupBox('Test headers');
 149         boxHeaders.add(boxHeaders2);
 150
 151         var fieldMaxRows = new form.Spinner(2, combo.getMaxVisibleRows(), 20);
 152         fieldMaxRows._manager.addEventListener('changeValue', function() {
 153                 combo.setMaxVisibleRows(fieldMaxRows.getValue());
 154         });
 155         var boxMaxRows = new GroupBox('Max. number of visible rows');
 156         boxMaxRows.add(fieldMaxRows);
 157
 158         var boxRow3 = new Box;
 159         boxRow3.add(boxHeaders, boxMaxRows);
 160
 161         //###Test of showOnTextField
 162         var rbDesc = new form.RadioButton('Description', 'description');
 163         rbDesc.setChecked(true);
 164         var rbIdAndDesc = new form.RadioButton('ID and description', 'idAndDescription');
 165         var fieldShowOn = new qx.manager.selection.RadioManager("showOnTextField", [ rbDesc, rbIdAndDesc ]);
 166         fieldShowOn.addEventListener("changeSelected", function(e) {
 167                 combo.setShowOnTextField(e.getData().getValue());
 168     });
 169
 170         var fieldSeparator = new form.TextField;
 171         fieldSeparator.setValue(combo.getIdDescriptionSeparator());
 172         fieldSeparator.setWidth(50);
 173         fieldSeparator.addEventListener('changeValue', function() {
 174                 combo.setIdDescriptionSeparator(fieldSeparator.getValue());
 175         });
 176         var boxShowOn2 = new Box;
 177         with (boxShowOn2) {
 178                 setSpacing(10);
 179                 add(new Label('Show on text field:'), rbDesc, rbIdAndDesc, new Label('Separator between ID and description:'), fieldSeparator);
 180         }
 181         var boxShowOn = new GroupBox('Test showOnTextField property');
 182         boxShowOn.add(boxShowOn2);
 183
 184         //###Test of get/setValue
 185         var fieldValue = new form.TextField;
 186         var butSetValue = new form.Button('Set');
 187         butSetValue.addEventListener('execute', function() {
 188                 combo.setValue(fieldValue.getValue());
 189         });
 190         var butGetValue = new form.Button('Get');
 191         butGetValue.addEventListener('execute', function() {
 192                 fieldValue.setValue(combo.getValue());
 193         });
 194         var boxVal2 = new Box;
 195         with (boxVal2) {
 196                 setSpacing(10);
 197                 add(fieldValue, butSetValue, butGetValue);
 198         }
 199         var boxVal = new GroupBox('Test value property');
 200         boxVal.add(boxVal2);
 201
 202         //###Main box
 203         var vbox = new Box('vertical');
 204         with (vbox) {
 205                 setSpacing(10);
 206                 setTop(50);
 207                 setLeft(30);
 208                 add(boxCombo, boxProp, boxRow3, boxShowOn, boxVal);
 209                 addToDocument();
 210         }
 211         combo.focus();
 212 });
 213   </script>
 214 </head>
 215 <body>
 216   <script type="text/javascript" src="../../script/layout.js"></script>
 217   <script type="text/javascript">
 218 if (console.debug) {
 219         with (qx.dev.log.Logger.ROOT_LOGGER) {
 220                 removeAllAppenders();
 221                 addAppender(new qx.dev.log.FireBugAppender);
 222                 setMinLevel(qx.dev.log.Logger.LEVEL_WARN);
 223         }
 224 }
 225   </script>
 226   <div id="demoDescription">
 227     <p>ComboBoxEx is an enhanced version of ComboBox</p>
 228   </div>
 229 </body>
 230 </html>