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:400
 126                     }
 127                 ]
 128             }
 129         ]
 130
 131     });
 132   mform.addButton('Save');
 133     mform.addButton('Cancel');
 134
 135
 136     mform.render('form-ct2');
 137
 138     /*
 139      * ================  Form 3  =======================
 140      */
 141     var fs = new Roo.form.Form({
 142         labelAlign: 'right',
 143         labelWidth: 80
 144     });
 145
 146     fs.fieldset(
 147         {legend:'Contact Information', style: 'width:320px;' },
 148         new Roo.form.TextField({
 149             fieldLabel: 'First Name',
 150             name: 'first',
 151             width:190
 152         }),
 153
 154         new Roo.form.TextField({
 155             fieldLabel: 'Last Name',
 156             name: 'last',
 157             width:190
 158         }),
 159
 160         new Roo.form.TextField({
 161             fieldLabel: 'Company',
 162             name: 'company',
 163             width:190
 164         }),
 165
 166         new Roo.form.TextField({
 167             fieldLabel: 'Email',
 168             name: 'email',
 169             vtype:'email',
 170             width:190
 171         }),
 172
 173         new Roo.form.ComboBox({
 174             fieldLabel: 'State',
 175             hiddenName:'state',
 176             store: new Roo.data.SimpleStore({
 177                 fields: ['abbr', 'state'],
 178                 data : Roo.exampledata.states // from states.js
 179             }),
 180             displayField:'state',
 181             typeAhead: true,
 182             mode: 'local',
 183             triggerAction: 'all',
 184             emptyText:'Select a state...',
 185             selectOnFocus:true,
 186             width:190
 187         }),
 188
 189         new Roo.form.DateField({
 190             fieldLabel: 'Date of Birth',
 191             name: 'dob',
 192             width:190,
 193             allowBlank:false
 194         })
 195     );
 196
 197     fs.addButton('Save');
 198     fs.addButton('Cancel');
 199
 200     fs.render('form-ct3');
 201
 202     /*
 203      * ================  Form 4  =======================
 204      */
 205     var form = new Roo.form.Form({
 206         labelAlign: 'right',
 207         labelWidth: 75
 208     });
 209
 210     form.column({width:342, labelWidth:75}); // open column, without auto close
 211     form.fieldset(
 212         {legend:'Contact Information'},
 213         new Roo.form.TextField({
 214             fieldLabel: 'Full Name',
 215             name: 'fullName',
 216             allowBlank:false,
 217             value: 'Fred Blogs'
 218         }),
 219
 220         new Roo.form.TextField({
 221             fieldLabel: 'Job Title',
 222             name: 'title',
 223             value: 'RooJS user'
 224         }),
 225
 226         new Roo.form.TextField({
 227             fieldLabel: 'Company',
 228             name: 'company',
 229             value: 'RooJS'
 230         }),
 231
 232         new Roo.form.TextArea({
 233             fieldLabel: 'Address',
 234             name: 'address',
 235             grow: true,
 236             preventScrollbars:true,
 237             value: '123 example drive'
 238         })
 239     );
 240     form.fieldset(
 241         {legend:'Phone Numbers'},
 242         new Roo.form.TextField({
 243             fieldLabel: 'Home',
 244             name: 'home',
 245             value: '(123) 456 789'
 246         }),
 247
 248         new Roo.form.TextField({
 249             fieldLabel: 'Business',
 250             name: 'business'
 251         }),
 252
 253         new Roo.form.TextField({
 254             fieldLabel: 'Mobile',
 255             name: 'mobile'
 256         }),
 257
 258         new Roo.form.TextField({
 259             fieldLabel: 'Fax',
 260             name: 'fax'
 261         })
 262     );
 263     form.end(); // closes the last container element (column, layout, fieldset, etc) and moves up 1 level in the stack
 264
 265
 266     form.column(
 267         {width:202, style:'margin-left:10px', clear:true}
 268     );
 269
 270     form.fieldset(
 271         {id:'photo', legend:'Photo'}
 272     );
 273     form.end();
 274
 275     form.fieldset(
 276         {legend:'Options', hideLabels:true},
 277         new Roo.form.Checkbox({
 278             boxLabel:'RooJS v1.1.1',
 279             name:'extuser',
 280             width:'auto'
 281         }),
 282         new Roo.form.Checkbox({
 283             boxLabel:'RooJS v2.0.0',
 284             name:'extcomm',
 285             width:'auto'
 286         }),
 287         new Roo.form.Checkbox({
 288             boxLabel:'RooScript',
 289             name:'extprem',
 290             width:'auto'
 291         })
 292
 293     );
 294
 295     form.end(); // close the column
 296
 297
 298     form.applyIfToFields({
 299         width:230
 300     });
 301
 302     form.addButton('Save');
 303     form.addButton('Cancel');
 304
 305     form.render('form-ct4');
 306
 307     // The form elements are standard HTML elements. By assigning an id (as we did above)
 308     // we can manipulate them like any other element
 309     var photo = Roo.get('photo');
 310     var c = photo.createChild({
 311         tag:'center',
 312         cn: {
 313             tag:'img',
 314             src: 'roojs_icon.jpg',
 315             style:'margin-bottom:5px;'
 316         }
 317     });
 318     new Roo.Button(c, {
 319         text: 'Change Photo'
 320     });
 321
 322    form5 = new Roo.form.Form({
 323         labelAlign: 'left',
 324         labelWidth: 120,
 325         items : [
 326             {
 327
 328                 xtype: 'Checkbox',
 329                 xns : Roo.form,
 330                fieldLabel: 'A checkbox',
 331                 boxLabel:'RooJS v1.1.1',
 332                 name:'extuser',
 333                 inputValue : '1',
 334                 value : '1',
 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 });