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