我遇到了extjs-spinner的问题。
我的应用程序中有两个微调器（minlength，maxlength）。
如果minlength大于maxlength或者maxlength小于minlength，我需要发出警报。
如果我使用向上和向下箭头键增加微调器值，则会在窗口上显示警告。这很好。
但是如果我使用鼠标增加微调器值，则警报会在窗口后面显示警报不可见，并且在关闭父窗口之前我无法关闭警报。
微调器看起来像这张图片：enter image description here
我的组织开发了自己的使用extjs的框架。微调器的事件处理程序代码如下
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']);
}
});
答案 0 :(得分：1)
窗口后面有警报： 您可以按照以下步骤进行管理：
minlength > maxlength或maxlength < minlength，请检查窗口的z-index值并在其中执行+1。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();
希望这有帮助：）