extjs 弹出模态窗口

1、定义form

[javascript] view plain copy

1. var form1 = Ext.create('Ext.form.Panel', {  
2.     id:'form1',  
3.     frame: true,  
4.     //title: 'Form Fields',  
5.     //width: 340,  
6.     bodyPadding: 5,  
7.     //baseCls: "x-plain",  
8.     fieldDefaults: {  
9.         labelAlign: 'left',  
10.         labelWidth: 90,  
11.         anchor: '100%'  
12.     },  
13.   
14.     items: [{  
15.         xtype: 'textfield',  
16.         name: 'job_id',  
17.         fieldLabel: 'job_fieldlabel',  
18.         value: 'Text field value'  
19.     }, {  
20.         xtype: 'textfield',  
21.         name: 'job_desc',  
22.         //inputType: 'password',  
23.           
24.         fieldLabel: 'job_fieldLabel'  
25.     }, {  
26.         xtype: 'textfield',  
27.         name: 'min_lvl',  
28.         fieldLabel: 'min_fieldlabel'  
29.     }, {  
30.         xtype: 'textfield',  
31.         name: 'max_lvl',  
32.         fieldLabel: 'max_fieldlabel',  
33.         value: 'Textarea value'  
34.     }]  
35. });  

2、定义window 载体窗口

[javascript] view plain copy

1. var win = Ext.create('Ext.Window', {  
2.     title: 'Resize Me',  
3.     closeAction: 'hide',   //改变系统关闭键的方法为'hide'  
4.     width: 500,  
5.     height: 500,  
6.     minWidth: 300,  
7.     minHeight: 200,  
8.     maximizable: true,   //是否显示最大化按钮  
9.     layout: 'fit',  
10.     plain: true,     //可以强制窗体颜色各背景色变的一样  
11.     items: form1,     //指明加载哪个form  
12.     modal: true,        //设定为模态窗口，否则底层网页还是可操作的。  
13.     buttons: [{  
14.         text: 'Send', handler: function () { alert('send'); }  
15.     }, {  
16.         text: 'Exit',  
17.                handler: function () { win.hide(); }  
18.     }]  
19. });  

3、先定义操作函数：

[javascript] view plain copy

1. function AddRecord() {  
2.     form1.getForm().reset();             //恢复到form定义时的样子。  
3.     win.show();  
4. }  
5.   
6. function EditRecord() {  
7.     var row = Ext.getCmp('mygrid').getSelectionModel().getSelection();  
8.     if (row.length == 0) {  
9.         Ext.Msg.alert("提示信息", "请您至少选择一个!");  
10.     }  
11.     else if (row.length > 1) {  
12.         Ext.Msg.alert("提示信息", "对不起只能选择一个!");  
13.     }  
14.     else if (row.length == 1) {  
15.         Ext.Msg.alert("只选了一个！");  
16.         form1.getForm().loadRecord(row[0]);           //自动载入当前所选的条目，按form中各控件的name名进行加载。  
17.         win.show();  
18.     }  
19. }  
20.   
21. function DeleteRecord() {  
22.     var row = grid.getSelectionModel().getSelection();  
23.     if (row.length == 0) {  
24.         Ext.Msg.alert("提示信息", "请您至少选择一个!");  
25.     }  
26.     else if (row.length > 1) {  
27.         Ext.Msg.alert("提示信息", "对不起只能选择一个!");  
28.     }  
29.     else if (row.length == 1) {  
30.         Ext.Msg.alert("只选了一个！");  
31.         form1.getForm().loadRecord(row[0]);  
32.         win.show();  
33.     }  
34. }  

4、定义按钮控件（可以不定义的，只是为了模块化好维护些，另外上面的函数可以在定义控件中直接定义，就不用单独定义函数了）

   

[javascript] view plain copy

1. var btnAddAction = Ext.create('Ext.Action', {  
2.         iconCls: 'addicon',   // '../shared/icons/fam/delete.gif',  // Use a URL in the icon config  
3.         text: '添加',  
4.         disabled: false,  
5.         minWidth: 80,  
6.         handler: function (widget, event) {  
7.             AddRecord();  
8.         }  
9.     });  
10.     var btnEditAction = Ext.create('Ext.Action', {  
11.         iconCls: 'editicon',  
12.         text: '编辑',  
13.         disabled: false,  
14.         minWidth: 80,  
15.         handler: function (widget, event) {  
16.             EditRecord();  
17.         }  
18.     });  
19.     var btnDeleteAction = Ext.create('Ext.Action', {  
20.         iconCls: 'deleteicon',  
21.         text: '删除',  
22.         disabled: false,  
23.         minWidth: 80,  
24.         handler: function (widget, event) {  
25.             DeleteRecord();  
26.         }  
27.     });  
28.   
29. ///--------------定义右键弹出菜单--------------------------------------------  
30.     var contextMenu = Ext.create('Ext.menu.Menu', {  
31.         items: [  
32.             btnAddAction,  
33.             btnEditAction,  
34.             btnDeleteAction  
35.         ]  
36.     });  

5、返回的数据格式(数据提交以后，返回数据格式)  注意success返回的值是布尔型，千万不要加引号变成字符型了。

{success:true} 或 {success:false,msg='异常信息‘}  

提交语句如下：

[javascript] view plain copy

1.     modal: true,        //设定为模态窗口  
2.     buttons: [{  
3.         text: 'Send',  
4.         handler: function () {  
5.             if (form1.getForm().isValid()) {  
6.                 //弹出效果  
7.                 Ext.MessageBox.show(  
8.                                     {  
9.                                         msg: '正在保存，请稍等...',  
10.                                         progressText: 'Saving...',  
11.                                         width: 300,  
12.                                         wait: true,  
13.                                         waitConfig: { interval: 200 },  
14.                                         icon: 'download',  
15.                                         animEl: 'saving'  
16.                                     }  
17.                                 );  
18.                 setTimeout(function () { }, 1000);  
19.                 alert('send');  
20.                 form1.getForm().submit({  
21.                     url: '../ashx/TestJobDataSave.ashx',  
22.                     //params: { 'job_id': 'job_id', 'job_desc': 'job_desc', 'min_lvl': 'min_lvl', 'max_lvl': 'max_lvl' },  // 默认都是以控件名提交参数，如果参数名相同则可以不用该句。  
23.                     method: "POST",  
24.                     success: function (form, action) {                
25.                         var flag = action.result.success;           //成功返回success为true  
26.                         if (flag ) {   
27.                              alert('成功返回！');   
28.                         }  
29.                     },  
30.                     failure: function (form, action) {   
31.                         var errorObj = Ext.JSON.decode(action.response.responseText);  <span style="color: rgb(255, 0, 0);"> //字串转化为json对象</span>  
32.                         Ext.Msg.show({  
33.                                   title: '错误提示',  
34.                                   msg: errorObj.<span style="color: rgb(255, 0, 0);">msg</span>,          //同上面的msg相对应。可以改为其他值的。  
35.                                   buttons: Ext.Msg.OK,  
36.                                   icon: Ext.Msg.ERROR  
37.                          });   
38.   
39.                     }  
40.                 })  
41.             }  
42.             else {  
43.                 alert('Form is not valid !');  
44.             }  
45.         }  
46.     }, {  
47.         text: 'Exit',  
48.         handler: function () { win.hide(); }  
49.     }]