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