EXT中创建一个弹窗效果

电玩女神 2023-07-25 12:59 5阅读 0赞

#### 调用弹窗的代码 ####

第一种弹窗：一级弹窗  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70]  
二级弹窗：  
![在这里插入图片描述][2020042211455386.png]  
第二种弹窗：一级弹窗  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70 1]  
二级弹窗：  
![在这里插入图片描述][20200422114635346.png]

我是写在了一个方法中来触发弹窗，也可以写一个事件来触发

//触发第一种弹窗代码
      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;
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70]: /images/20230528/3cd99074644e44eba79de3ae147bacb7.png
[2020042211455386.png]: /images/20230528/22db96091cc44a0893a5ea8502dfdf2d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTE1MTk2MA_size_16_color_FFFFFF_t_70 1]: /images/20230528/d3e431641408478288fdf08f5dce8dbe.png
[20200422114635346.png]: /images/20230528/5af08e8b134f4c3b8b38973a30312cd9.png