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