git.roojs.org Git - roojs1/blob - examples/form/dynamic.js

   1 /*
   2  * Based on:
   3  * Ext JS Library 1.1.1
   4  * Copyright(c) 2006-2007, Ext JS, LLC.
   5  *
   6  * Originally Released Under LGPL - original licence link has changed is not relivant.
   7  *
   8  * Fork - LGPL
   9  * <script type="text/javascript">
  10  */
  11
  12 var mform;
  13 var simple;
  14 \r
  15 Roo.onReady(function(){
  16
  17     Roo.QuickTips.init();
  18
  19     // turn on validation errors beside the field globally
  20     Roo.form.Field.prototype.msgTarget = 'side';
  21
  22     /*
  23      * ================  Simple form  =======================
  24      */
  25     simple = new Roo.form.Form({
  26         labelWidth: 75, // label settings here cascade unless overridden
  27         url:'save-form.php'
  28     });
  29     simple.add(
  30         new Roo.form.TextField({
  31             fieldLabel: 'First Name',
  32             name: 'first',
  33             width:175,
  34             allowBlank:false
  35         }),
  36
  37         new Roo.form.TextField({
  38             fieldLabel: 'Last Name',
  39             name: 'last',
  40             width:175
  41         }),
  42
  43         new Roo.form.TextField({
  44             fieldLabel: 'Company',
  45             name: 'company',
  46             width:175
  47         }),
  48
  49         new Roo.form.TextField({
  50             fieldLabel: 'Email',
  51             name: 'email',
  52             vtype:'email',
  53             width:175
  54         }),
  55          new Roo.form.DayPicker({
  56             fieldLabel: 'Pick a day',
  57             name: 'daypick',
  58             width:175
  59         })
  60     );
  61
  62     simple.addButton('Save');
  63     simple.addButton('Cancel');
  64
  65     simple.render('form-ct');
  66
  67
  68     /*
  69      * ================  Form 2  =======================
  70      */
  71     mform = new Roo.form.Form({
  72         labelAlign: 'top',
  73         items : [
  74
  75             {
  76
  77                 xtype : 'Column',
  78                 width: 500, // precise column sizes or percentages or straight CSS
  79                 items : [
  80                     {
  81                         xtype : 'ComboBoxArray',
  82                         xns : Roo.form,
  83                         fieldLabel: 'Multi select test',
  84                         name: 'country',
  85                         hiddenName: 'countryNames',
  86                         width: 500,
  87                         combo : {
  88
  89
  90                             xtype : 'ComboBox',
  91                             xns : Roo.form,
  92                             store: {
  93                                 xtype : 'SimpleStore',
  94                                 xns: Roo.data,
  95                                 fields: ['abbr', 'state'],
  96                                 data : Roo.exampledata.states // from states.js
  97                             },
  98                             width: 200,
  99                             editable : false,
 100                             displayField:'state',
 101                             typeAhead: false,
 102                             mode: 'local',
 103                             triggerAction: 'all',
 104                             emptyText:'Select a state...',
 105                             selectOnFocus:true,
 106                             resizable:true
 107                         }
 108
 109
 110                     }
 111
 112                 ]
 113             },
 114
 115             {
 116
 117                 xtype : 'Column',
 118                 width: 272, // precise column sizes or percentages or straight CSS
 119                 items : [
 120                     {
 121                         xtype : 'TextField',
 122                         fieldLabel: 'First Name',
 123                         name: 'first',
 124                         width:225
 125                     },
 126                     {
 127                         xtype : 'TextField',
 128                         fieldLabel: 'Company',
 129                         name: 'company',
 130                         width:225
 131                     }
 132                 ]
 133             },
 134
 135             {
 136                 xtype : 'Column',
 137                 width:272,
 138                 style:'margin-left:10px',
 139                 clear:true,
 140                 items : [
 141                     {
 142                         xtype : 'TextField',
 143                         fieldLabel: 'Last Name',
 144                         name: 'last',
 145                         width:225
 146                     },
 147                     {
 148                         xtype : 'TextField',
 149                         fieldLabel: 'Email',
 150                         name: 'email',
 151                         vtype:'email',
 152                         width:225
 153                     }
 154                 ]
 155             },
 156             {
 157
 158                 xtype : 'Column',
 159                 width:600,
 160                 labelAlign: 'top',
 161                 items : [
 162                     {
 163                         xtype : 'HtmlEditor',
 164                         name : 'bio',
 165                         fieldLabel:'Biography',
 166                         width:550,
 167                         height:200,
 168                         resizable: 's' /// where the handles should got..
 169                     }
 170                 ]
 171             }
 172         ]
 173
 174     });
 175     mform.addButton('Save');
 176     mform.addButton('Cancel');
 177
 178
 179     mform.render('form-ct2');
 180     mform.setValues({
 181         country  : 'HK,SG',
 182         countryNames : 'Hong Kong, Singapore'
 183
 184     })
 185
 186     /*
 187      * ================  Form 3  =======================
 188      */
 189     var fs = new Roo.form.Form({
 190         labelAlign: 'right',
 191         labelWidth: 80
 192     });
 193
 194     fs.fieldset(
 195         {legend:'Contact Information', style: 'width:320px;' },
 196         new Roo.form.TextField({
 197             fieldLabel: 'First Name',
 198             name: 'first',
 199             width:190
 200         }),
 201
 202         new Roo.form.TextField({
 203             fieldLabel: 'Last Name',
 204             name: 'last',
 205             width:190
 206         }),
 207
 208         new Roo.form.TextField({
 209             fieldLabel: 'Company',
 210             name: 'company',
 211             width:190
 212         }),
 213
 214         new Roo.form.TextField({
 215             fieldLabel: 'Email',
 216             name: 'email',
 217             vtype:'email',
 218             width:190
 219         }),
 220
 221         new Roo.form.ComboBox({
 222             fieldLabel: 'State',
 223             hiddenName:'state',
 224             store: new Roo.data.SimpleStore({
 225                 fields: ['abbr', 'state'],
 226                 data : Roo.exampledata.states // from states.js
 227             }),
 228             displayField:'state',
 229             typeAhead: true,
 230             mode: 'local',
 231             triggerAction: 'all',
 232             emptyText:'Select a state...',
 233             selectOnFocus:true,
 234             width:190
 235         }),
 236
 237         new Roo.form.DateField({
 238             fieldLabel: 'Date of Birth',
 239             name: 'dob',
 240             width:190,
 241             allowBlank:false
 242         })
 243     );
 244
 245     fs.addButton('Save');
 246     fs.addButton('Cancel');
 247
 248     fs.render('form-ct3');
 249
 250     /*
 251      * ================  Form 4  =======================
 252      */
 253     var form = new Roo.form.Form({
 254         labelAlign: 'right',
 255         labelWidth: 75
 256     });
 257
 258     form.column({width:342, labelWidth:75}); // open column, without auto close
 259     form.fieldset(
 260         {legend:'Contact Information'},
 261         new Roo.form.TextField({
 262             fieldLabel: 'Full Name',
 263             name: 'fullName',
 264             allowBlank:false,
 265             value: 'Fred Blogs'
 266         }),
 267
 268         new Roo.form.TextField({
 269             fieldLabel: 'Job Title',
 270             name: 'title',
 271             value: 'RooJS user'
 272         }),
 273
 274         new Roo.form.TextField({
 275             fieldLabel: 'Company',
 276             name: 'company',
 277             value: 'RooJS'
 278         }),
 279
 280         new Roo.form.TextArea({
 281             fieldLabel: 'Address',
 282             name: 'address',
 283             grow: true,
 284             preventScrollbars:true,
 285             value: '123 example drive'
 286         })
 287     );
 288     form.fieldset(
 289         {legend:'Phone Numbers'},
 290         new Roo.form.TextField({
 291             fieldLabel: 'Home',
 292             name: 'home',
 293             value: '(123) 456 789'
 294         }),
 295
 296         new Roo.form.TextField({
 297             fieldLabel: 'Business',
 298             name: 'business'
 299         }),
 300
 301         new Roo.form.TextField({
 302             fieldLabel: 'Mobile',
 303             name: 'mobile'
 304         }),
 305
 306         new Roo.form.TextField({
 307             fieldLabel: 'Fax',
 308             name: 'fax'
 309         })
 310     );
 311     form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
 312
 313
 314     form.column(
 315         {width:202, style:'margin-left:10px', clear:true}
 316     );
 317
 318     form.fieldset(
 319         {id:'photo', legend:'Photo'}
 320     );
 321     form.end();
 322
 323     form.fieldset(
 324         {legend:'Options', hideLabels:true},
 325         new Roo.form.Checkbox({
 326             boxLabel:'RooJS v1.1.1',
 327             name:'extuser',
 328             width:'auto'
 329         }),
 330         new Roo.form.Checkbox({
 331             boxLabel:'RooJS v2.0.0',
 332             name:'extcomm',
 333             width:'auto'
 334         }),
 335         new Roo.form.Checkbox({
 336             boxLabel:'RooScript',
 337             name:'extprem',
 338             width:'auto'
 339         })
 340
 341     );
 342
 343     form.end(); // close the column
 344
 345
 346     form.applyIfToFields({
 347         width:230
 348     });
 349
 350     form.addButton('Save');
 351     form.addButton('Cancel');
 352
 353     form.render('form-ct4');
 354
 355     // The form elements are standard HTML elements. By assigning an id (as we did above)
 356     // we can manipulate them like any other element
 357     var photo = Roo.get('photo');
 358     var c = photo.createChild({
 359         tag:'center',
 360         cn: {
 361             tag:'img',
 362             src: 'roojs_icon.jpg',
 363             style:'margin-bottom:5px;'
 364         }
 365     });
 366     new Roo.Button(c, {
 367         text: 'Change Photo'
 368     });
 369
 370    form5 = new Roo.form.Form({
 371         labelAlign: 'left',
 372         labelWidth: 120,
 373         items : [
 374             {
 375
 376                 xtype: 'Checkbox',
 377                 xns : Roo.form,
 378                fieldLabel: 'A checkbox',
 379                 boxLabel:'RooJS v1.1.1',
 380                 name:'extuser',
 381                 inputValue : '1',
 382                 value : '1',
 383                 width:'auto'
 384             },
 385             {
 386                 xtype : 'DisplayField',
 387                 xns : Roo.form,
 388                 name:'textex',
 389                 fieldLabel: 'Simple',
 390                 value : 'example text'
 391             } ,
 392             {
 393                 xtype: 'ComboBox',
 394                 xns : Roo.form,
 395                 fieldLabel: 'State',
 396                 hiddenName:'state',
 397                 store: {
 398                     xtype: 'SimpleStore',
 399                     xns : Roo.data,
 400                     fields: ['abbr', 'state'],
 401                     data : Roo.exampledata.states // from states.js
 402                 },
 403                 displayField:'state',
 404                 typeAhead: true,
 405                 mode: 'local',
 406                 triggerAction: 'all',
 407                 emptyText:'Select a state...',
 408                 selectOnFocus:true,
 409                 width:190,
 410                 listeners : {
 411                     add : function()
 412                     {
 413                         Roo.MessageBox.alert("Alert", "Add Pressed");
 414                     },
 415                     edit : function()
 416                     {
 417                         Roo.MessageBox.alert("Alert", "Edit Pressed");
 418                     }
 419
 420                 }
 421             },
 422
 423         ]
 424     });
 425
 426     form5.render('form-ct5');
 427
 428
 429
 430
 431
 432 });