Extjs4 新的布局方式

本问介绍一个常见的??例子“联系我们”在弹出窗口的形式。表单使用vbox和hbox布局，以实现一个统一的灵活的布局。

JS代码：

 

1. Ext.require([
2.     'Ext.form.*'
3. ]);
5. Ext.onReady(function() {
7.     var win;
9.     function showContactForm() {
10.         if (!win) {
11.             var form = Ext.widget('form', {
12.                 layout: {
13.                     type: 'vbox',
14.                     align: 'stretch'
15.                 },
16.                 bodyBorder: 0,
18.                 fieldDefaults: {
19.                     labelAlign: 'top',
20.                     labelWidth: 100,
21.                     labelStyle: 'font-weight:bold'
22.                 },
23.                 defaults: {
24.                     margins: '0 0 10 0'
25.                 },
27.                 items: [{
28.                     xtype: 'fieldcontainer',
29.                     fieldLabel: 'Your Name',
30.                     labelStyle: 'font-weight:bold;padding:0',
31.                     layout: 'hbox',
32.                     defaultType: 'textfield',
34.                     fieldDefaults: {
35.                         labelAlign: 'top'
36.                     },
38.                     items: [{
39.                         flex: 1,
40.                         name: 'firstName',
41.                         fieldLabel: 'First',
42.                         allowBlank: false
43.                     }, {
44.                         width: 30,
45.                         name: 'middleInitial',
46.                         fieldLabel: 'MI',
47.                         margins: '0 0 0 5'
48.                     }, {
49.                         flex: 2,
50.                         name: 'lastName',
51.                         fieldLabel: 'Last',
52.                         allowBlank: false,
53.                         margins: '0 0 0 5'
54.                     }]
55.                 }, {
56.                     xtype: 'textfield',
57.                     fieldLabel: 'Your Email Address',
58.                     vtype: 'email',
59.                     allowBlank: false
60.                 }, {
61.                     xtype: 'textfield',
62.                     fieldLabel: 'Subject',
63.                     allowBlank: false
64.                 }, {
65.                     xtype: 'textareafield',
66.                     fieldLabel: 'Message',
67.                     labelAlign: 'top',
68.                     flex: 1,
69.                     margins: '0',
70.                     allowBlank: false
71.                 }],
73.                 buttons: [{
74.                     text: 'Cancel',
75.                     handler: function() {
76.                         this.up('form').getForm().reset();
77.                         this.up('window').hide();
78.                     }
79.                 }, {
80.                     text: 'Send',
81.                     handler: function() {
82.                         if (this.up('form').getForm().isValid()) {
83.                             // In a real application, this would submit the form to the configured url
84.                             // this.up('form').getForm().submit();
85.                             this.up('form').getForm().reset();
86.                             this.up('window').hide();
87.                             Ext.MessageBox.alert('Thank you!', 'Your inquiry has been sent. We will respond as soon as possible.');
88.                         }
89.                     }
90.                 }]
91.             });
93.             win = Ext.widget('window', {
94.                 title: 'Contact Us',
95.                 closeAction: 'hide',
96.                 bodyPadding: 10,
97.                 width: 400,
98.                 height: 400,
99.                 minHeight: 400,
100.                 layout: 'fit',
101.                 resizable: true,
102.                 modal: true,
103.                 items: [form]
104.             });
105.         }
107.         win.show();
108.     }
112.     var mainPanel = Ext.widget('panel', {
113.         renderTo: Ext.getBody(),
114.         title: 'Welcome!',
115.         width: 500,
116.         bodyPadding: 20,
118.         items: [{
119.             xtype: 'component',
120.             html: 'Thank you for visiting our site! We welcome your feedback; please click the button below to ' +
121.                   'send us a message. We will respond to your inquiry as quickly as possible.',
122.             style: 'margin-bottom: 20px;'
123.         }, {
124.             xtype: 'container',
125.             style: 'text-align:center',
126.             items: [{
127.                 xtype: 'button',
128.                 cls: 'contactBtn',
129.                 scale: 'large',
130.                 text: 'Contact Us',
131.                 handler: showContactForm
132.             }]
133.         }]
134.     });
136. });

代码实现在一个window窗口内使用新的布局方式(vbox和hbox)显示一个form表单，相对于Extjs 4.0之前的方式，将更加灵活。