/ext-4.1.0_b3/docs/extjs/examples/form/field-types.js

 1Ext.require([
 2    'Ext.form.*'
 3]);
 4
 5Ext.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});