extjs spinner _ on mouse click 警报在窗口后面

Posted 2023-02-26

【中文标题】extjs spinner _ on mouse click 警报在窗口后面

【英文标题】：extjs spinner _ on mouse cilck the alert is coming behind the window

【发布时间】：2016-02-24 04:17:03

【问题描述】：

我遇到了 extjs-spinner 的问题。

我的应用程序中有两个微调器(minlength, maxlength)。

如果 minlength 大于 maxlength 或者如果 maxlength 小于 minlength 我需要发出警报。

如果我在板上使用向上和向下箭头键增加微调器值，则窗口上会出现警报。这很好。

但是，如果我使用鼠标增加微调器值，则警报会出现在不可见警报的窗口后面，并且在关闭父窗口之前我无法关闭警报。

微调器看起来像这个图像：enter image description here

我的组织开发了自己的使用 extjs 的框架。 spinner的事件处理代码如下

 cbx.formElement.SpinnerField = function(config)
    this.plainLabel = config.plainLbl;
    this.fieldLabel = config.displayNmKey;
    this.name = config.itemId;
    //CHG_MULTIFORM Starts
    if(!Ext.isEmpty(config.multiInd) && config.multiInd==true && !Ext.isEmpty(config.index))
        this.value = config.model.getModelData()[config.multiFormId][config.itemId][config.index];
    else
        this.value = config.model.getModelData()[config.itemId];    
    
    //CHG_MULTIFORM Ends
    this.required = config.requiredInd;
    this.conditional = config.conditionalInd;
    this.readOnly = config.readOnlyInd === 'Y' ? true : false;
    this.hidden = config.visibleInd === 'Y' ? false : true;
    this.validationType = config.vType;
    /**
     * Below code commented so that the developer can provide minimum value in
     * cbxpreinitialize event else the default minimum value 0 will be assigned
     */
    // this.minValue='0'; //CBX_FW_Q112F_106
    cbx.formElement.SpinnerField.superclass.constructor.call(this, config);
;

Ext.extend(cbx.formElement.SpinnerField, Ext.ux.form.SpinnerField, 
    required : 'N',
    conditional : 'N',
    bundleKey : '',
    minValue:0, // CBX_FW_Q112F_106
    lookup : false,
    vtype :'invalidChars',
    allowDecimals: false, // CBX_165
    incrementValue: 1,
    accelerate: 'true',
    labelSeparator:'',
     validationType : 'numeric', // CBX_FW_Q112F_106
   // allowSpaces : false,
   plainLabel : '',
    fieldLabel : '',
    // cls : 'x-form-textField',
     // private
    initComponent:function()
        //CBXFW_DIT_77 starts
        this.on('hide',Ext.createDelegate(this.updateVisibilityInSV, this, [this,'N']));
        this.on('show',Ext.createDelegate(this.updateVisibilityInSV, this, [this,'Y']));
        //CBXFW_DIT_77 ends
        if (Ext.isEmpty(this.maxLength)) 
            this.maxLength = undefined;
        
        if (Ext.isEmpty(this.minLength)) 
            this.minLength = undefined;
        
        cbx.formElement.SpinnerField.superclass.initComponent.apply(this, arguments);   
        var bundle;
        var commonbundle = CRB.getFWBundle();
        bundle = CRB.getBundle(cbx.jsutil.getBundleKey(this));
        if (!Ext.isEmpty(this.plainLabel)) 
            this.fieldLabel = this.plainLabel;
         else if (Ext.isEmpty(this.fieldLabel)) 
            this.fieldLabel = '';
         else 
            this.fieldLabel = bundle['LBL_' + this.fieldLabel];
        
        if (this.maxLength < Number.MAX_VALUE) 
            this.maxLengthText = String.format(
                    commonbundle['ERR_MAXLENGTH_EXCEED'],
                    this.fieldLabel, this.maxLength);
        
        if (this.minLength < Number.MIN_VALUE) 
            this.minLengthText = String.format(
                    commonbundle['ERR_MINLENGTH_EXCEED'],
                    this.fieldLabel, this.minLength);
        
        if (this.conditional === 'Y') 
            this.blankText = String.format(
                    commonbundle['ERR_MANDATORY'], this.fieldLabel);
            if (Ext.isEmpty(this.fieldLabel)) 
                this.fieldLabel = '?' + this.fieldLabel + '?'
                        + '<span class = \'cbx-mandatory-fx\'">**</span>';// CHG001-CSS
                                                                            // changes
             else 
                this.fieldLabel = this.fieldLabel
                        + '<span class = \'cbx-mandatory-fx\'">**</span>';// CHG001-CSS
            
        
        else if (this.required === 'Y') 
            this.allowBlank=false;  
            this.blankText = String.format(
                    commonbundle['ERR_MANDATORY'], this.fieldLabel);
            if (Ext.isEmpty(this.fieldLabel)) 
                this.fieldLabel = '?' + this.fieldLabel + '?'
                        + '<span class = \'mandatory\'">*</span>';
             else 
                this.fieldLabel = this.fieldLabel
                        + '<span class = \'mandatory\'">*</span>';
            
         else 
            this.blankText = String.format(
                    commonbundle['ERR_MANDATORY'], this.fieldLabel);
            if (Ext.isEmpty(this.fieldLabel)) 
                this.fieldLabel = '?' + this.fieldLabel + '?'
                        + '<span class = \'non_mandatory\'"></span>';
             else 
                this.fieldLabel = this.fieldLabel
                        + '<span class = \'non_mandatory\'"></span>';
            
        
        this.labelSeparator = '';
    this.onBlur=function() console.log("test spin onBlur");//nageswara
    this.clearInvalid();  // CBX_FW_Q112F_106
    this.validate();      // CBX_FW_Q112F_106
    this.syncModelData();
    this.spinnerMandatoryValidator(this.getValue());
    ;
    this.on('spin',function(obj)
        console.log("test spin on"); // nageswara
        this.clearInvalid(); // CBX_FW_Q112F_106
        this.syncModelData();
        this.spinnerMandatoryValidator(obj.value);
        );
        switch(this.validationType) 
            case 'alphaNumeric' : 
                            if(this.allowSpaces)
                                this.maskRe = /[A-Za-z0-9 ]/;
                            else
                            this.maskRe = /[A-Za-z0-9]/;
                            
                            break;
            case 'numeric' : 
                            if(this.allowSpaces)
                            this.maskRe = /[0-9 ]/;
                            else
                            this.maskRe = /[0-9]/;
                            
                            break;
            case 'portalSupported' : 
                            if(this.allowSpaces)
                            this.maskRe = /[^<>;()!=&\'\"]/;
                            else
                            this.maskRe = /[0-9]/;
                            
                            break;                              
        
        this.anchor = (this.anchor == undefined) ? '' : this.anchor ;
    ,
 afterRender:function()
     var that=this;
     this.updateScreenViewData(this);//CBXFW_DIT_77
     cbx.formElement.SpinnerField.superclass.afterRender
        .call(this); 
     this.getEl().on('keyup',function()  
         console.log("tes keyup"); // nageswara
            that.clearInvalid();
            );
        if(this.copyPasteInd==="Y")
            
     this.getEl().on('keydown',preventCopyPaste,this);
     this.getEl().on('drop',preventCopyPaste,this);
     this.getEl().on('dragstart',preventCopyPaste,this);
     this.getEl().on('draggesture',preventCopyPaste,this);
            
 ,
syncModelData : function() 
    if(!Ext.isEmpty(this.multiInd) && this.multiInd==true && !Ext.isEmpty(this.multiFormId))
        this.model.updateValue(this.name, this.getValue(),undefined,this.index,this.multiFormId);   
    else
        this.value = this.model.getModelData()[this.name];////CT1.0_FFW Fixes
        this.model.updateValue(this.name, this.getValue());
    
        this.updateScreenViewData(this);//CBXFW_DIT_77
,
setMinValue: function(minValue) 
 if(!Ext.isEmpty(minValue) && !(isNaN(minValue)))
     this.minValue=minValue;
 
,
setMaxValue: function(maxValue) 
    if(!Ext.isEmpty(maxValue) && !(isNaN(maxValue)))
         this.maxValue=maxValue;
     
,
setdefaultValue: function(defaultValue) 
    if(!Ext.isEmpty(defaultValue) && !(isNaN(defaultValue)))
         this.defaultValue=defaultValue;
     
,
setDecimalPrecision: function(allowDecimalPrecision)  
    if(!Ext.isEmpty(allowDecimalPrecision) )
        if(this.allowDecimals==true && !(isNaN(allowDecimalPrecision)))
            this.decimalPrecision=allowDecimalPrecision;
        
     
,
validate:function()
    if (!this.disabled && (this.el.dom.className.indexOf('errorBg')!=-1 || this.el.dom.className.indexOf(this.invalidClass) != -1)) 
    return false;
    
    if(this.disabled || this.validateValue(this.processValue(this.getRawValue())))
               this.clearInvalid();
               return true;
           
           return false;
    ,
    isVisible : function()
        return cbx.formElement.SpinnerField.superclass.isVisible.apply(this, arguments);  
    ,
    getPrintData : function()
        var label = this.plainLabel;
        var fieldValue = this.getValue();
        var printMap = ;
        printMap[label] = fieldValue;
        return printMap;
    ,
    spinnerMandatoryValidator : function(v)
        // TODO bundle to be changed. This should be common bundle
        combundle = CRB.getFWBundle();
        if(combundle !== null)
            if((v == '') && (this.required==='Y'))
                this.markInvalid(this.blankText);               
            
        
        else           
                if((v == '') && (this.required==='Y'))
                this.markInvalid('? ERR_MANDATORY ?');
            
        
    ,
    getScreenViewData:function()
    
        return this.getValue();
    
);

下面的代码是关于如何开发 minlength、maxlength 警报的......

    this.fm.registerHandler("cbxchange", "MAX_LENGTH", function(fm,event,fieldName,value)
        var MaxLength = parseInt(fm.model.getValue("MAX_LENGTH"));
        var MinLength = parseInt(fm.model.getValue("MIN_LENGTH"));
        MaxLength = parseInt(MaxLength);
        MinLength = parseInt(MinLength);
        if(MaxLength < MinLength)
            var err_Dialog = new iportal.Dialog(
                  dialogType : 'MESSAGE',
                  title : 'Validation',
                  message : 'MaxLength Always Greater Than MinLength', // WDK_FORMFW_CLEANUP
                  okHandler : function ()
                      err_Dialog.close();
                  
              );
              err_Dialog.show();
              fm.clearValues(['MAX_LENGTH']);
        
    );
    this.fm.registerHandler("cbxchange", "MIN_LENGTH", function(fm,event,fieldName,value)
        var MaxLength = parseInt(fm.model.getValue("MAX_LENGTH"));
        var MinLength = parseInt(fm.model.getValue("MIN_LENGTH"));
        if( MinLength > MaxLength && MaxLength!=NaN)
            var err_Dialog = new iportal.Dialog(
                  dialogType : 'MESSAGE',
                  title : 'Validation',
                  message : 'MinLength Should Not Exceed Than MaxLength', // WDK_FORMFW_CLEANUP
                  okHandler : function ()
                      err_Dialog.close();
                  
              );
              err_Dialog.show();
              fm.clearValues(['MIN_LENGTH']);
        
    );

【问题讨论】：

如果 minlength>maxlength 或 maxlength

【参考方案1】：

对于窗口后面的警报： 您可以通过以下步骤进行管理：

一个。如果minlength > maxlength 或maxlength < minlength，检查窗口的z-index 值并在其中+1。 乙。创建你的 err_Dialog 和 以 err_Dialog 的样式应用增加的z-index。

因为警报来了两次： 您可以在 err_Dialog 中提供id，如下所示：

var err_Dialog = new iportal.Dialog( id: 'my_err_dialog', dialogType : 'MESSAGE', title : 'Validation', message : 'MinLength Should Not Exceed Than MaxLength', // WDK_FORMFW_CLEANUP okHandler : function () err_Dialog.close(); );

然后， 如果minlength > maxlength 或maxlength < minlength 要显示警报，请添加以下代码：

if(Ext.getCmp('my_err_dialog')) Ext.getCmp('my_err_dialog').close();

在此之后添加以下代码以显示警报：

var err_Dialog = new iportal.Dialog( id: 'my_err_dialog', dialogType : 'MESSAGE', title : 'Validation', message : 'MinLength Should Not Exceed Than MaxLength', // WDK_FORMFW_CLEANUP okHandler : function () err_Dialog.close(); ); err_Dialog.show();

希望有帮助:)