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