首页 > 代码库 > extjs 弹出模态窗口

extjs 弹出模态窗口

2024-07-15 21:33:59   216人阅读

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.     }] 


联系
我们