/ext-4.1.0_b3/examples/form/vbox-form.js

 1Ext.Loader.setConfig({enabled: true});
 2
 3Ext.Loader.setPath('Ext.ux', '../ux/');
 4Ext.require([
 5    'Ext.form.*',
 6    'Ext.window.Window',
 7    'Ext.data.*',
 8    'Ext.ux.FieldReplicator'
 9]);
10
11
12Ext.onReady(function() {
13    var form = Ext.create('Ext.form.Panel', {
14        plain: true,
15        border: 0,
16        bodyPadding: 5,
17        url: 'save-form.php',
18
19        fieldDefaults: {
20            labelWidth: 55,
21            anchor: '100%'
22        },
23
24        layout: {
25            type: 'vbox',
26            align: 'stretch'  // Child items are stretched to full width
27        },
28
29        items: [{
30            xtype: 'combo',
31            store: Ext.create('Ext.data.ArrayStore', {
32                fields: [ 'email' ],
33                data: [
34                    ['test@example.com'],
35                    ['someone@example.com'],
36                    ['someone-else@example.com']
37                ]
38            }),
39            displayField: 'email',
40            plugins: [ Ext.ux.FieldReplicator ],
41            fieldLabel: 'Send To',
42            queryMode: 'local',
43            selectOnTab: false,
44            name: 'to'
45        }, {
46            xtype: 'textfield',
47            fieldLabel: 'Subject',
48            name: 'subject'
49        }, {
50            xtype: 'textarea',
51            fieldLabel: 'Message text',
52            hideLabel: true,
53            name: 'msg',
54            style: 'margin:0', // Remove default margin
55            flex: 1  // Take up all *remaining* vertical space
56        }]
57    });
58
59    var win = Ext.create('Ext.window.Window', {
60        title: 'Compose message',
61        collapsible: true,
62        animCollapse: true,
63        maximizable: true,
64        width: 750,
65        height: 500,
66        minWidth: 300,
67        minHeight: 200,
68        layout: 'fit',
69        items: form,
70        dockedItems: [{
71            xtype: 'toolbar',
72            dock: 'bottom',
73            ui: 'footer',
74            layout: {
75                pack: 'center'
76            },
77            items: [{
78                minWidth: 80,
79                text: 'Send'
80            },{
81                minWidth: 80,
82                text: 'Cancel'
83            }]
84        }]
85    });
86    win.show();
87});