We are having one strange behavior in Ext JS textbox. We have one pop up window in the application with barcode field as textbox, submit and cancel as buttons. Textbox "change" and "special key" events are wired up with the textbox. When user enters barcode manually and hits "Enter" key, it fires special key event and validates the barcode. We have barcode reader control which reads the barcode and displays it in to textbox. In this case, change event is fired. What is happening, if User hits "Enter" key in the Google chrome browser, it fires "Special Key" event and fires "Change" event twice.
This behavior is noticeable only in Chrome but not in IE.
Code:
ApplicationSample.UserScanPopUp = {
fields: {},
locationId: '',
showUserScanPopUp: function (options) {
this.options = options;
if (options.locationId) {
this.locationId = options.locationId;
}
if (!this.userScanWin) {
this.userScanWin = new Ext.Window({
title: 'Scan User Badge',
width: 400,
height: 150,
style: 'padding-top:10px',
modal: true,
closeAction: 'hide',
layout: 'form',
listeners: {
show: this.setBarcodeFocus,
scope: this
},
items: [
{ xtype: 'box', html: 'Please Scan your Badge to Continue', width: 200, tabIndex: 2 },
this.fields.userBarcode = new Ext.form.TextField({ itemId: 'barcodeField', tabIndex: 0, xtype: 'textfield', fieldLabel: 'Barcode', width: 200, maxLength: 50, listeners: { change: this.onUserBarcodeChange, specialkey: this.onBarCodeSpecialKey, scope: this } })
],
buttons: [
{ text: 'Ok', tabIndex: 1, handler: this.onOk, scope: this },
{ text: 'Cancel', tabIndex: 2, scope: this, handler: this.hideUserScanWin }
]
});
}
this.userScanWin.show();
},
hideUserScanWin: function () {
this.userScanWin.hide();
},
onBarCodeSpecialKey: function (field, e) {
if (e.getKey() === e.ENTER) {
this.processBarcode(field, field.getValue());
//this.onUserBarcodeChange(field, field.getValue());
}
},
setBarcodeFocus: function () {
var barcodeField = this.fields.userBarcode;
barcodeField.setValue('');
barcodeField.focus.defer(500, barcodeField);
},
onOk: function () {
var barcodeField = this.fields.userBarcode;
if (barcodeField) {
var value = barcodeField.getValue();
this.onUserBarcodeChange('', value, '');
}
},
onUserBarcodeChange: function (field, newValue, oldValue) {
if (newValue.length === 0 && newValue !== oldValue) {
return;
}
this.processBarcode(field, newValue, oldValue);
},
processBarcode:function(field,newValue,oldValue){
Ext.Ajax.request({
url: EH.BuildUrl('Barcode'),
params: { action: 'Other', actionType: 'ScanUserBarcode', Barcode: newValue, LocationId: this.locationId },
callback: function (options, success, response) {
if (success) {
var json = Ext.decode(response.responseText);
var result = json.result;
var barcodeType = result.BarcodeType;
switch (barcodeType) {
case 'L':
case 'I':
this.inValidScanType();
break;
case 'U':
this.onUserScan(result);
break;
}
if (barcodeType.length === 0) {
Ext.Msg.alert('Message', CSiQ.Messages.InvalidBarcode, this.setBarcodeFocus, this);
}
} else {
Ext.Msg.alert('Error', 'An unhandled exception occured', this.setBarcodeFocus, this);
}
},
scope: this
});
},
inValidScanType: function () {
Ext.Msg.alert('Error', 'Please make sure that you scan your badge', this.setBarcodeFocus, this);
},
isShowUserScanAuthenticationPopup: function (result) {
var customValues = result.CustomValues;
if (customValues) {
var isTrackUser = (customValues.IsTrackUser === "1"),
isLoggedIn = (customValues.IsLoggedIn === "1");
//Need to prompt the user password if the user is a trackable and not logged in Or if it is not a trackable user
if ((isTrackUser && !isLoggedIn) || (!isTrackUser)) {
this.showUserScanAuthenticationPopup();
} else {
result.success = true;
this.options.onSuccess.call(this.options.scope || this, result);
}
}
},
onUserScan: function (options) {
if (options) {
var message = options.Message;
var id = options.Id;
var length = message.length;
if (length === 0) {
this.displayName = options.Name;
this.barcode = options.Barcode;
this.hideUserScanWin();
this.isShowUserScanAuthenticationPopup(options);
} else {
switch (message) {
case 'InactiveUser':
message = CSiQ.Messages.InactiveUser;
break;
}
Ext.Msg.alert('Message', message, this.setBarcodeFocus, this);
}
}
},
showUserScanAuthenticationPopup: function () {
if (!this.userAuthenticationWin) {
this.userAuthenticationWin = new Ext.Window({
title: 'User Authentication',
width: 400,
height: 150,
style: 'padding-top:10px',
modal: true,
closeAction: 'hide',
layout: 'form',
itemId: 'userAuthentication',
items: [
{ itemId: 'userName', xtype: 'displayfield', fieldLabel: 'User Name', width: 200, name: 'UserName' },
this.fields.password = new Ext.form.TextField({ itemId: 'password', xtype: 'textfield', fieldLabel: 'Password', allowBlank: false, inputType: 'password', listeners: { specialkey: this.onSpecialKey, scope: this } })
],
listeners: {
show: this.onUserAuthenticationFocus,
scope: this
},
buttons: [
{ text: 'Ok', scope: this, handler: this.authenticateUser },
{ text: 'Cancel', scope: this, handler: this.hideuserAuthenticationWin }
]
});
}
this.userAuthenticationWin.show();
var displayName = this.displayName;
if (this.firstName && this.lastName) {
displayName = this.firstName + ' ' + this.lastName;
}
if (displayName.length !== 0) {
this.userAuthenticationWin.getComponent('userName').setValue(displayName);
}
},
onUserAuthenticationFocus: function () {
var f = this.fields.password;
f.setValue('');
f.focus.defer(500, f);
},
onSpecialKey: function (field, e) {
if (e.getKey() === e.ENTER) {
this.authenticateUser();
}
},
hideuserAuthenticationWin: function () {
if (this.userAuthenticationWin) {
this.userAuthenticationWin.hide();
}
},
clearPassword: function () {
this.userAuthenticationWin.getComponent('password').setValue('');
},
authenticateUser: function () {
var password = this.userAuthenticationWin.getComponent('password').getValue();
if (this.barcode.length > 0 && password.length > 0) {
Ext.Ajax.request({
url: EH.BuildUrl('Security'),
params: {
action: 'Other',
otherAction: 'AuthenticateUser',
barcode: this.barcode,
locationId: this.locationId,
password: password
},
callback: function (options, success, response) {
var json;
this.clearPassword();
if (success) {
json = Ext.decode(response.responseText);
if (json.status === 0) {
if (!this.trackUser) {
this.isValidNonTrackUser = true;
}
this.userAuthenticationWin.hide();
if (typeof this.options.onSuccess === 'function') {
this.options.onSuccess.call(this.options.scope || this, json);
} else {
this.onAuthenticationSuccess(json);
}
}
if (json.msg.length > 0) {
var message;
if (json.msg === 'UserPasswordExpired') {
this.userAuthenticationWin.hide();
CSiQ.Security.ChangePassword.barcode = this.barcode;
CSiQ.Security.ChangePassword.userId = json.userId;
CSiQ.Security.ChangePassword.source = 'LocationScan';
CSiQ.Security.ChangePassword.show();
}
else {
switch (json.msg) {
case 'AccountLocked':
message = CSiQ.Messages.AccountLocked;
break;
case 'AccountDeactivated':
message = CSiQ.Messages.AccountDeactivated;
break;
case 'InvalidCredential':
message = CSiQ.Messages.InvalidCredential;
break;
case 'UserWithoutRole':
message = CSiQ.Messages.UserWithoutRole;
break;
default:
message = json.msg;
break;
}
Ext.Msg.alert('User Authentication', message, this.onUserAuthenticationFocus, this);
}
}
}
},
scope: this
});
} else {
Ext.Msg.alert('Error', CSiQ.Messages.EnterValidPassword, this.onUserAuthenticationFocus, this);
}
},
onAuthenticationSuccess: function () {
this.hideuserAuthenticationWin();
}
};
Any help on this issue is highly appreciated.
Thanks,
Dhanvin.
Change event listener on Textbox is firing twice in Google chrome
Aucun commentaire:
Enregistrer un commentaire