Extjs4 表单

 

1. <mce:script type="text/javascript"><!--  
2.         Ext.require([  
3.                 'Ext.form.*'  
4.            ]);  
5.   
6.         Ext.onReady(function() {  
7.             Ext.regModel('Nation', {  
8.                 fields: [  
9.                     {type: 'string', name: 'id'},  
10.                     {type: 'string', name: 'name'}  
11.                 ]  
12.             });  
13.   
14.             var nations = [  
15.                           {"id":"1","name":"汉"},  
16.                           {"id":"2","name":"藏"},  
17.                           {"id":"3","name":"维吾尔"}  
18.                       ];  
19.   
20.             // The data store holding the states   
21.             var store = Ext.create('Ext.data.Store', {  
22.                 model: 'Nation',  
23.                 data: nations  
24.             });  
25.   
26.             // ComboBox with a custom item template   
27.             var nationCombo = Ext.create('Ext.form.field.ComboBox', {  
28.                 fieldLabel: '民族',  
29.                 displayField: 'name',  
30.                 store: store,  
31.                 queryMode: 'local'  
32.             });  
33.   
34.             var formPanel = Ext.create('Ext.form.Panel', {  
35.                 frame: false,  
36.                 title: '基本信息',  
37.                 width: 780,  
38.                 bodyPadding: 0,  
39.                 border: 0,  
40.                 border:false,  
41.                 fieldDefaults: {  
42.                     labelAlign: 'left',  
43.                     labelWidth: 90,  
44.                     anchor: '100%'  
45.                 },  
46.                 items: [  
47.                     {  
48.                           layout:'column',  
49.                           items:[  
50.                                  {  
51.                                      columnWidth:.33,  
52.                                      defaultType: 'textfield',  
53.                                         items: [{  
54.                                             fieldLabel: '姓名',  
55.                                             name: 'first'  
56.                                         },{  
57.                                             fieldLabel: '出生年月',  
58.                                             xtype:'datefield',  
59.                                             name: 'company1'  
60.                                         },{  
61.                                             fieldLabel: '学位',  
62.                                             xtype:'datefield',  
63.                                             name: 'company2'  
64.                                         }]  
65.                                  },  
66.                                  {  
67.                                      columnWidth:.33,  
68.                                      defaultType: 'textfield',  
69.                                         items: [{  
70.                                             fieldLabel: '性别',  
71.                                             name: 'first'  
72.                                         }, {  
73.                                             fieldLabel: '政治面貌',  
74.                                             xtype:'datefield',  
75.                                             name: 'company3'  
76.                                         },{  
77.                                             fieldLabel: '党政职务',  
78.                                             xtype:'datefield',  
79.                                             name: 'company4'  
80.                                         }]  
81.                                  },  
82.                                  {  
83.                                      columnWidth:.33,  
84.                                      defaultType: 'textfield',  
85.                                         items: [  
86.                                             nationCombo, {  
87.                                             fieldLabel: '学历',  
88.                                             xtype:'datefield',  
89.                                             name: 'company',  
90.                                             anchor:'95%'  
91.                                         },{  
92.                                             fieldLabel: '社会兼职职务',  
93.                                             xtype:'datefield',  
94.                                             name: 'company',  
95.                                             anchor:'95%'  
96.                                         }]  
97.                                  }  
98.                               ]  
99.                     },  
100.                     //第二块开始   
101.                     {  
102.                           layout:'column',  
103.                           border:true,  
104.                           items:[  
105.                           {  
106.                               columnWidth:.48,  
107.                               layout: 'anchor',  
108.                               xtype: 'fieldcontainer',  
109.                               fieldLabel: '专业技术',  
110.                               labelWidth: 85,  
111.                               combineErrors: true,  
112.                               msgTarget : 'side',  
113.                               layout: 'hbox',  
114.                               defaults: {  
115.                                   flex: 1,  
116.                                   hideLabel: true  
117.                               },  
118.                               items: [  
119.                                    {  
120.                                         xtype: 'fieldcontainer',  
121.                                         fieldLabel: '',  
122.                                         combineErrors: true,  
123.                                         msgTarget : 'side',  
124.                                         defaults: {  
125.                                             flex: 1,  
126.                                             hideLabel: false  
127.                                         },  
128.                                         items: [  
129.                                             {  
130.                                                 xtype     : 'textfield',  
131.                                                 name      : 'startDate',  
132.                                                 fieldLabel: '名称',  
133.                                                 margin: '0 0 0 0',  
134.                                                 allowBlank: false  
135.                                             },  
136.                                             {  
137.                                                 xtype     : 'datefield',  
138.                                                 name      : 'endDate',  
139.                                                 fieldLabel: '获取时间（年月）',  
140.                                                 allowBlank: false  
141.                                             }  
142.                                         ]  
143.                                   }  
144.                                 ]  
145.                             },{  
146.                                   columnWidth:.5,  
147.                                   layout: 'anchor',  
148.                                   xtype: 'fieldcontainer',  
149.                                   fieldLabel: '行政职级',  
150.                                   combineErrors: true,  
151.                                   msgTarget : 'side',  
152.                                   layout: 'hbox',  
153.                                   labelWidth: 127,  
154.                                   defaults: {  
155.                                       flex: 1,  
156.                                       hideLabel: true  
157.                                   },  
158.                                   items: [  
159.                                        {  
160.                                             xtype: 'fieldcontainer',  
161.                                             fieldLabel: '',  
162.                                             combineErrors: true,  
163.                                             msgTarget : 'side',  
164.                                             defaults: {  
165.                                                 flex: 1,  
166.                                                 hideLabel: false  
167.                                             },  
168.                                             items: [  
169.                                                 {  
170.                                                     xtype     : 'textfield',  
171.                                                     name      : 'startDate',  
172.                                                     fieldLabel: '名称',  
173.                                                     margin: '0 0 0 0',  
174.                                                     allowBlank: false  
175.                                                 },  
176.                                                 {  
177.                                                     xtype     : 'datefield',  
178.                                                     name      : 'endDate',  
179.                                                     fieldLabel: '获取时间(年月)',  
180.                                                     allowBlank: false  
181.                                                 }  
182.                                             ]  
183.                                       }  
184.                                     ]  
185.                                 }  
186.                         ]  
187.                     },//第二块结束   
188.                     //第三块开始   
189.                     {  
190.                           layout:'column',  
191.                           border:true,  
192.                           items:[  
193.                           {  
194.                               columnWidth:.68,  
195.                               layout: 'anchor',  
196.                               xtype: 'fieldcontainer',  
197.                               fieldLabel: '所取得的行业资格证书名称及等级',  
198.                               labelWidth: 85,  
199.                               combineErrors: true,  
200.                               msgTarget : 'side',  
201.                               layout: 'hbox',  
202.                               defaults: {  
203.                                   flex: 1,  
204.                                   hideLabel: true  
205.                               },  
206.                               items: [  
207.                                    {  
208.                                         xtype: 'fieldcontainer',  
209.                                         fieldLabel: '',  
210.                                         combineErrors: true,  
211.                                         msgTarget : 'side',  
212.                                         defaults: {  
213.                                             flex: 1,  
214.                                             hideLabel: false  
215.                                         },  
216.                                         items: [  
217.                                             {  
218.                                                 xtype     : 'textfield',  
219.                                                 name      : 'startDate',  
220.                                                 fieldLabel: '最高行业资格证书名称',  
221.                                                 labelWidth: 125,  
222.                                                 margin: '0 0 0 0',  
223.                                                 allowBlank: false  
224.                                             },  
225.                                             {  
226.                                                 xtype: 'checkboxfield',  
227.                                                 name: 'radio1',  
228.                                                 value: 'radiovalue1',  
229.                                                 fieldLabel: '行业资格等级',  
230.                                                 boxLabel: '高级'  
231.                                             }, {  
232.                                                 xtype: 'checkboxfield',  
233.                                                 name: 'radio1',  
234.                                                 value: 'radiovalue2',  
235.                                                 fieldLabel: '',  
236.                                                 labelSeparator: '',  
237.                                                 hideEmptyLabel: false,  
238.                                                 boxLabel: '中级'  
239.                                             }, {  
240.                                                 xtype: 'checkboxfield',  
241.                                                 name: 'radio1',  
242.                                                 value: 'radiovalue2',  
243.                                                 fieldLabel: '',  
244.                                                 labelSeparator: '',  
245.                                                 hideEmptyLabel: false,  
246.                                                 boxLabel: '初级'  
247.                                             },  
248.                                             {  
249.                                                 xtype     : 'datefield',  
250.                                                 name      : 'endDate',  
251.                                                 fieldLabel: '获取时间(年月)',  
252.                                                 allowBlank: false  
253.                                             }  
254.                                         ]  
255.                                   }  
256.                                 ]  
257.                             },{  
258.                                   columnWidth:.30,  
259.                                   layout: 'anchor',  
260.                                   xtype: 'fieldcontainer',  
261.                                   fieldLabel: '人员状态',  
262.                                   labelWidth: 85,  
263.                                   combineErrors: true,  
264.                                   msgTarget : 'side',  
265.                                   defaults: {  
266.                                       flex: 1,  
267.                                       hideLabel: true  
268.                                   },  
269.                                   items: [  
270.                                          
271.                                            {  
272.                                                 xtype: 'checkboxfield',  
273.                                                 name: 'radio1',  
274.                                                 value: 'radiovalue1',  
275.                                                 fieldLabel: '',  
276.                                                 boxLabel: '在岗'  
277.                                             }, {  
278.                                                 xtype: 'checkboxfield',  
279.                                                 name: 'radio1',  
280.                                                 value: 'radiovalue2',  
281.                                                 fieldLabel: '',  
282.                                                 labelSeparator: '',  
283.                                                 hideEmptyLabel: false,  
284.                                                 boxLabel: '新进第一年'  
285.                                             }, {  
286.                                                 xtype: 'checkboxfield',  
287.                                                 name: 'radio1',  
288.                                                 value: 'radiovalue2',  
289.                                                 fieldLabel: '',  
290.                                                 labelSeparator: '',  
291.                                                 hideEmptyLabel: false,  
292.                                                 boxLabel: '距退休不足两年'  
293.                                             }, {  
294.                                                 xtype: 'checkboxfield',  
295.                                                 name: 'radio1',  
296.                                                 value: 'radiovalue2',  
297.                                                 fieldLabel: '',  
298.                                                 labelSeparator: '',  
299.                                                 hideEmptyLabel: false,  
300.                                                 boxLabel: '不在岗超半年'  
301.                                             }, {  
302.                                                 xtype: 'checkboxfield',  
303.                                                 name: 'radio1',  
304.                                                 value: 'radiovalue2',  
305.                                                 fieldLabel: '',  
306.                                                 labelSeparator: '',  
307.                                                 hideEmptyLabel: false,  
308.                                                 boxLabel: '其他'  
309.                                             }  
310.                                         
311.                                     ]  
312.                                 }  
313.                         ]  
314.                     },//第三块结束   
315.                     //第四块开始   
316.                     {  
317.                           layout:'column',  
318.                           items:[  
319.                                  {  
320.                                      columnWidth:.5,  
321.                                      defaultType: 'textfield',  
322.                                         items: [{  
323.                                             fieldLabel: '所在部门',  
324.                                             name: 'first'  
325.                                         }]  
326.                                  },  
327.                                  {  
328.                                      columnWidth:.5,  
329.                                      defaultType: 'textfield',  
330.                                         items: [{  
331.                                             fieldLabel: '联系电话',  
332.                                             name: 'first'  
333.                                         }]  
334.                                  }  
335.                               ]  
336.                     }//第四块结束   
337.                   ],  
338.                   dockedItems: [{  
339.                         xtype: 'toolbar',  
340.                         ui: 'footer',  
341.                         dock: 'bottom',  
342.                         layout: {  
343.                             type: 'hbox',  
344.                             pack: 'center'  
345.                         },  
346.                         items: [{xtype: 'checkboxfield', boxLabel: '', name: 'cb-cust-1'},{  
347.                             text: '保存',  
348.                             width:80,  
349.                             disabled: true  
350.                         }]  
351.                   }]  
352.               });  
353.   
354.             formPanel.render('form-ct');  
355.   
356.         });  
357.                       
358.      
359. / --></mce:script>