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