examples/form/field-types.js

   1 Ext.require([
   2     'Ext.form.*'
   3 ]);
   4
   5 Ext.onReady(function() {
   6
   7     var formPanel = Ext.create('Ext.form.Panel', {
   8         frame: true,
   9         title: 'Form Fields',
  10         width: 340,
  11         bodyPadding: 5,
  12
  13         fieldDefaults: {
  14             labelAlign: 'left',
  15             labelWidth: 90,
  16             anchor: '100%'
  17         },
  18
  19         items: [{
  20             xtype: 'textfield',
  21             name: 'textfield1',
  22             fieldLabel: 'Text field',
  23             value: 'Text field value'
  24         }, {
  25             xtype: 'textfield',
  26             name: 'password1',
  27             inputType: 'password',
  28             fieldLabel: 'Password field'
  29         }, {
  30             xtype: 'filefield',
  31             name: 'file1',
  32             fieldLabel: 'File upload'
  33         }, {
  34             xtype: 'textareafield',
  35             name: 'textarea1',
  36             fieldLabel: 'TextArea',
  37             value: 'Textarea value'
  38         }, {
  39             xtype: 'displayfield',
  40             name: 'displayfield1',
  41             fieldLabel: 'Display field',
  42             value: 'Display field <span style="color:green;">value</span>'
  43         }, {
  44             xtype: 'numberfield',
  45             name: 'numberfield1',
  46             fieldLabel: 'Number field',
  47             value: 5,
  48             minValue: 0,
  49             maxValue: 50
  50         }, {
  51             xtype: 'checkboxfield',
  52             name: 'checkbox1',
  53             fieldLabel: 'Checkbox',
  54             boxLabel: 'box label'
  55         }, {
  56             xtype: 'radiofield',
  57             name: 'radio1',
  58             value: 'radiovalue1',
  59             fieldLabel: 'Radio buttons',
  60             boxLabel: 'radio 1'
  61         }, {
  62             xtype: 'radiofield',
  63             name: 'radio1',
  64             value: 'radiovalue2',
  65             fieldLabel: '',
  66             labelSeparator: '',
  67             hideEmptyLabel: false,
  68             boxLabel: 'radio 2'
  69         }, {
  70             xtype: 'datefield',
  71             name: 'date1',
  72             fieldLabel: 'Date Field'
  73         }, {
  74             xtype: 'timefield',
  75             name: 'time1',
  76             fieldLabel: 'Time Field',
  77             minValue: '1:30 AM',
  78             maxValue: '9:15 PM'
  79         }]
  80     });
  81
  82     formPanel.render('form-ct');
  83
  84 });