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