調用彈窗的代碼

第一種彈窗：一級彈窗

二級彈窗：

第二種彈窗：一級彈窗

二級彈窗：

我是寫在了一個方法中來觸發彈窗，也可以寫一個事件來觸發

//觸發第一種彈窗代碼window.setPassWord4CheckIn = function(roomInfo){var recs = roomInfo;var ONETIME = 2;new slms.SetOneTimeAndLongTimePassword({className: config.className,category: config.category,title:'設置一次性密碼',record: recs,showMode: ONETIME}).show();console.log(roomInfo)};//觸發第二種彈窗代碼window.setPassWord4CheckIn = function(roomInfo){var recs = roomInfo;var LONGTIME = 1;new slms.SetOneTimeAndLongTimePassword({className: config.className,category: config.category,title:'設置長期密碼',record: recs,showMode: LONGTIME}).show();console.log(roomInfo)};

彈窗代碼：

slms.SetOneTimeAndLongTimePassword = function(config){//第一個彈窗點擊確定按鈕后執行的內容function getOneTimePassword() {if (_formPanel.getForm().isValid()) {var data = _formPanel.getForm().getValues();//FIXME 不一定叫ID_win.close();frame.util.ShowLoadMask("請稍等");Ext.Ajax.request({url: 'RemoteOperateLogAction!text.action',root: 'retList',params: {query:config.record.UUID,data: Ext.encode([data])},success: function (response, options) {var success = Ext.decode(response.responseText).success;var retList = Ext.decode(response.responseText).retList;var oneTime = 2;console.log(retList)if (success == true) {frame.util.HideLoadMask();//在這里觸發確定按鈕后的二級彈窗new slms.ShowPassword({title:'一次性密碼',className: config.className,record:retList,showMode:oneTime}).show();frame.util.ShowAutoPopoMsg("獲取一次性密碼成功!");config.grid.getStore().reload();_win.close();}console.log(store)},failure: frame.OnNetWorkFailure});}}/第二種彈窗點擊確定按鈕后執行的內容function getLongTimePassword() {if (_formPanel.getForm().isValid()) {var data = _formPanel.getForm().getValues();//FIXME 不一定叫ID_win.close();frame.util.ShowLoadMask("請稍等");Ext.Ajax.request({url: 'RemoteOperateLogAction!text.action',root: 'retList',params: {query:config.record.UUID,data: Ext.encode([data])},success: function (response, options) {var success = Ext.decode(response.responseText).success;var retList = Ext.decode(response.responseText).retList;var longTime = 1;console.log(retList)if (success == true) {frame.util.HideLoadMask();//第二種彈窗觸發的二級彈窗new slms.ShowPassword({title:'長期密碼',className: config.className,record:retList,showMode:longTime}).show();frame.util.ShowAutoPopoMsg("獲取長期密碼成功!");config.grid.getStore().reload();_win.close();}console.log(store)},failure: frame.OnNetWorkFailure});}}//通過判斷傳來的showMode來判斷顯示哪個彈窗效果switch(config.showMode){case 1 : {//三個輸入框 對應第二種頁面效果var _txtAuthorizationSchoolID = factory.CreateWidget('textfield', {name: 'authorizationSchoolID',allowBlank:false,fieldLabel: '授權人學號'});var _txtStartTime = {xtype: 'datefield',name: 'startTime',selectOnFocus: true,focusSN: '',value: new Date(),format: 'Y-m-d H:i',fieldLabel: '開始時間',hiddenValue: false,};var _txtEndTime = {xtype: 'datefield',name: 'endTime',selectOnFocus: true,focusSN: '',value: new Date(),format: 'Y-m-d H:i',value:new Date().add(Date.DAY, +1),fieldLabel: '結束時間',hiddenValue: false,};break;}default : {//三個輸入框 對應第一種頁面效果var _txtAuthorizationSchoolID = factory.CreateWidget('textfield', {name: 'authorizationSchoolID',allowBlank:false,fieldLabel: '授權人學號'});var _txtStartTime = {xtype: 'datefield',name: 'startTime',selectOnFocus: true,focusSN: '',value: new Date(),format: 'Y-m-d H:i',fieldLabel: '開始時間',readOnly:true,hiddenValue: false,};var _txtEndTime = {xtype: 'datefield',name: 'endTime',selectOnFocus: true,focusSN: '',value: new Date(),format: 'Y-m-d H:i',value:new Date().add(Date.DAY, +1),fieldLabel: '結束時間',readOnly:true,hiddenValue: false,};break;}}//彈窗中輸入框的屬性設置var _formPanel = new Ext.form.FormPanel({frame: true,border: true,width: 'auto',layout: 'column',defaults: {xtype: 'fieldset',anchor: '100%',labelAlign: 'right',columnWidth: 1,border: false,labelWidth: 100,align: 'stretch'},//彈窗顯示的輸入框items: [{defaults: {anchor: '90%'},items: [_txtAuthorizationSchoolID]}, {defaults: {anchor: '90%'},items: [_txtStartTime]}, {defaults: {anchor: '90%'},items: [_txtEndTime]}]});//整個彈窗的屬性設置var cfg = {width: 500,constrain: true,constrainHeader: true,modal: true,height: 200,layout: 'fit',border: false,buttonAlign: 'center',items: [_formPanel]};//關閉彈窗function CloseAddTimePasswordPopupWindow() {// 現在這個判定不準確_win.close();}var _cancelBtn = new Ext.Button({xtype: 'button',text: frame.text.cancel,cls: 'cencleBtn',iconCls: frame.icon.cancel,handler: CloseAddTimePasswordPopupWindow});//用來判斷點擊確定按鈕后執行哪個函數switch (config.showMode) {case 1 : {var btnTxt = frame.text.save;var btnIcon = frame.icon.save;var btnKey = fast.KEY_SAVE;var btnFn = getLongTimePassword;break;}default : {var btnIcon = frame.icon.save;var btnKey = fast.KEY_SAVE;var btnFn = getOneTimePassword;break;}}//彈窗中按鈕屬性的設置cfg.buttons = [{xtype: 'button',text: '獲取',iconCls: btnIcon,cls: 'saveBtn',plugins: new frame.plugin.KeyMapPlugin({className: config.className,type: 'window',key: btnKey,fn: btnFn}),handler: btnFn}, _cancelBtn];var _win = new Ext.Window(Ext.apply(cfg, config));return _win; }

總結

以上是生活随笔為你收集整理的EXT中创建一个弹窗效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。