Ext.form.FormPanel 综合实例

 Ext.form.FormPanel 综合实例 

                      

Javascript代码

1. Ext.onReady(function(){
   
2. //表单开始------------------------------------------------------  
3.     var form = new Ext.form.FormPanel({  
4.     　　title: '编辑学生信息', 
5.        renderTo: Ext.getBody(), 
6.     　　region: 'east',  
7.     　　frame: true,  
8.     　　width: 300,  
9.     　　autoHeight: true,  
10.     　　labelAlign: 'right',  
11.     　　labelWidth: 60,  
12.     　　defaultType: 'textfield',  
13.     　　defaults: {  
14.         　　width: 200,  
15.         　　allowBlank: false  
16.     　　},  
17.     　　items: [{  
18.         　　xtype: 'hidden',  
19.         　　name: 'id'  
20.     　　},{  
21.         　　fieldLabel: '学号',  
22.         　　name: 'code'  
23.     　　},{  
24.         　　fieldLabel: '姓名',  
25.         　　name: 'name'  
26.     　　},{  
27.         　　fieldLabel: '年龄',  
28.         　　name: 'age',  
29.     　　  xtype: 'numberfield',  
30.     　　  allowNegative: false  
31.     　　},{  
32.         　　fieldLabel: '性别',  
33.         　　name: 'sexText',  
34.         　　hiddenName: 'sex',  
35.         　　xtype: 'combo',  
36.         　　store: new Ext.data.SimpleStore({  
37.             　　fields: ['value','text'],  
38.             　　data: [['1','男'],['2','女']]  
39.     　　    }),  
40.         　　emptyText: '请选择',  
41.         　　mode: 'local',  
42.         　　triggerAction: 'all',  
43.         　　valueField: 'value',  
44.         　　displayField: 'text' 
45.     　　},{  
46.         　　fieldLabel: '政治面貌',  
47.         　　name: 'political',  
48.         　　xtype: 'combo',  
49.         　　store: new Ext.data.SimpleStore({  
50.         　　fields: ['text'],  
51.         　　data: [['群众'],['党员'],['团员']]  
52.         　　}),  
53.         　　emptyText: '请选择',  
54.         　　mode: 'local',  
55.         　　triggerAction: 'all',  
56.         　　valueField: 'text',  
57.         　　displayField: 'text' 
58.     　　},{  
59.         　　fieldLabel: '籍贯',  
60.         　　name: 'origin'  
61.     　　},{  
62.         　　fieldLabel: '所属系',  
63.         　　name: 'professional'  
64.     　　}],  
65.     　　buttons: [{  
66.     　　  text: '添加',  
67.     　　  handler: function() {  
68.         　　if (!form.getForm().isValid()) {  
69.                 //调用form.getForm().isValid()进行数据校验。如果返回false，  
70.                 //说明表单中某些输入组件中的数据还无法通过校验，不应该提交这些错误格式的数据，  
71.                 //这时我们应该直接跳出函数，中止提交操作  
72.         　　  return;  
73.         　　}  
74.         　　if (form.getForm().findField("id").getValue() == "") {  
75.             　　// 添加  
76.             　　form.getForm().submit({  
77.                     //这里的form是我们前面创建的Ext.form.FormPanel，  
78.                     //它的getForm()函数返回Form- Panel内部对应的Ext.form.BasicForm。  
79.                     //现在我们调用BasicForm的submit()函数，将内部items中输入组件的值提交给后台的jsp/save.jsp  
80.                 　　url: 'save.jsp',  
81.                 　　success: function(f, action) {  
82.                          //如果后台没有出现异常，而且返回的JSON信息中包含{success:true}，
83.                          //那么就会执行success参数对应的处理函数  
84.                     　　if (action.result.success) {  
85.                              //创建一个Ext.Msg.alert()显示响应的JSON信息中的msg部分的内容，
86.                              //在用户关闭alert提示框之后,执行方法  
87.                         　　Ext.Msg.alert('消息', action.result.msg,function(){  
88.                             　　grid.getStore().reload();//调用grid.getStore().reload()刷新Grid中的数据  
89.                             　　form.getForm().reset();//form.getForm().reset()清空上次提交的数据  
90.                             　　form.buttons[0].setText('添加');  
91.                         　　});  
92.                     　　}  
93.                 　　},  
94.                 　　failure: function() {  
95.                         //如果后台出现400或500错误，就会触发failure参数对应的处理函数。  
96.                         //这里只是弹出一个alert提示框告诉用户“添加失败”，
97.                         //等待用户对刚才提交失败的信息进行修改或做其他处理  
98.                 　   　Ext.Msg.alert('错误',"添加失败");  
99.                 　　}  
100.             　　});  
101.         　　} else {  
102.         　　// 修改  
103.             　　form.getForm().submit({  
104.             　　url: 'save.jsp',  
105.             　　success: function(f, action) {  
106.             　　if (action.result.success) {  
107.             　　Ext.Msg.alert('消息',action.result.msg,function(){  
108.             　　grid.getStore().reload();  
109.             　　form.getForm().reset();  
110.             　　form.buttons[0].setText('添加');  
111.             　　});  
112.             　　}  
113.             　　},  
114.             　　failure: function() {  
115.             　　Ext.Msg.alert('错误',"修改失败");  
116.             　　}  
117.             　　});  
118.         　　}  
119.     　　    }  
120.     　　},{  
121.         　　  text: '清空',  
122.             handler:function(){  
123.                 form.getForm().reset();  
124.                 form.buttons[0].setText("添加");  
125.             }  
126.     　　},{  
127.     　　      text: '删除',  
128.             handler:function(){  
129.                 var id = form.getForm().findField("id").getValue();  
130.                 if(id == ''){  
131.                     Ext.Msg.alert('提示','请选择需要删除的学生记录信息');  
132.                 } else {  
133.                     Ext.Ajax.request({  
134.                         url:'remove.jsp',  
135.                         params:"id="+id,  
136.                         success:function(){  
137.                             var json = Ext.decode(response.responseText);  
138.                             if(json.success){  
139.                                 Ext.Msg.alert('消息',json.msg,function(){  
140.                                         grid.getStore().reload();  
141.                                         form.getForm().reset();  
142.                                         form.buttons[0].setText("添加");  
143.                                     }                                     
144.                                 );  
145.                             }  
146.                         },  
147.                         failure:function(){  
148.                             Ext.Msg.alert('错误','删除失败');  
149.                         }                         
150.                     });  
151.                 }  
152.             }  
153.     　　}]  
154.     })//表单结束
155. });