Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / examples / form / vbox-form.js
1 /*!
2  * Ext JS Library 3.3.1
3  * Copyright(c) 2006-2010 Sencha Inc.
4  * licensing@sencha.com
5  * http://www.sencha.com/license
6  */
7 Ext.onReady(function() {
8     var form = new Ext.form.FormPanel({
9         baseCls: 'x-plain',
10         labelWidth: 55,
11         url: 'save-form.php',
12         layout: {
13             type: 'vbox',
14             align: 'stretch'  // Child items are stretched to full width
15         },
16         defaults: {
17             xtype: 'textfield'
18         },
19
20         items: [{
21             xtype: 'combo',
22             store: ['test@example.com', 'someone-else@example.com' ],
23             plugins: [ Ext.ux.FieldReplicator, Ext.ux.FieldLabeler ],
24             fieldLabel: 'Send To',
25             name: 'to'
26         },{
27             plugins: [ Ext.ux.FieldLabeler ],
28             fieldLabel: 'Subject',
29             name: 'subject'
30         }, {
31             xtype: 'textarea',
32             fieldLabel: 'Message text',
33             hideLabel: true,
34             name: 'msg',
35             flex: 1  // Take up all *remaining* vertical space
36         }]
37     });
38
39     var w = new Ext.Window({
40         title: 'Compose message',
41         collapsible: true,
42         maximizable: true,
43         width: 750,
44         height: 500,
45         minWidth: 300,
46         minHeight: 200,
47         layout: 'fit',
48         plain: true,
49         bodyStyle: 'padding:5px;',
50         buttonAlign: 'center',
51         items: form,
52         buttons: [{
53             text: 'Send'
54         },{
55             text: 'Cancel'
56         }]
57     });
58     w.show();
59 });