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