/ext-4.1.0_b3/examples/form/vbox-form.js
JavaScript | 87 lines | 80 code | 7 blank | 0 comment | 0 complexity | 161ff5cef00304cbe7d7587226855cfb MD5 | raw file
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});