今天在用EXT的Ext.form.TwinTriggerField的时候遇到一个问题,在IE下按下ENTER可以对EXT.GRID进行异步,但在FF下就不行,查遍资料,发现是TEXT FILED的EVENT事件在作怪,按下ENTER后会提交整个FORM,异步也就失败了。
一开始还在想是不是事件注册错误
后来换了好几个监听键盘的事件发现问题还是没解决,查看EXT API后发现有个属性是可以把默认的事件给去掉的stopEvent();这个方法在Ext.lib.Event,
window.event有一个属性叫做cancelBubble:
Boolean that specifies or receives one of the following values.
false
Default. Bubbling is enabled, allowing the next event handler in the hierarchy to receive the event.
true
Bubbling is disabled for this event, preventing the next event handler in the hierarchy from receiving the event.
在某些情况下需要屏蔽某些事件的话就可以使用这个属性。
还有就是要在异步事件注册之前就要把键盘监听默认的事件给STOP掉,要不不会起作用
一开始还在想是不是事件注册错误
Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
initComponent : function(){
Ext.app.SearchField.superclass.initComponent.call(this);
this.on('keydown', function(f, e){
if(e.getKey() == e.ENTER){
this.onTrigger2Click();
}
}, this);
},
validationEvent:false,
validateOnBlur:false,
trigger1Class:'x-form-clear-trigger',
trigger2Class:'x-form-search-trigger',
hideTrigger1:true,
width:180,
hasSearch : false,
paramNames : {start:"start",limit:"limit",query:'query'},
enableKeyEvents: true,
onTrigger1Click : function(){
if(this.hasSearch){
this.el.dom.value = '';
var o = {};
o[this.paramNames.start]= 0;
this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramNames.query] = '';
this.store.reload({params:o});
this.triggers[0].hide();
this.hasSearch = false;
}
},
onTrigger2Click : function(){
var v = this.getRawValue();
if(v.length < 1){
this.onTrigger1Click();
return;
}
var o = {};
o[this.paramNames.start]= 0;
this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramNames.query] = v;
this.store.reload({params:o});
this.hasSearch = true;
this.triggers[0].show();
}
});
后来换了好几个监听键盘的事件发现问题还是没解决,查看EXT API后发现有个属性是可以把默认的事件给去掉的stopEvent();这个方法在Ext.lib.Event,
stopEvent: function(ev) {
this.stopPropagation(ev);
this.preventDefault(ev);
},
stopPropagation: function(ev) {
ev = ev.browserEvent || ev;
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
preventDefault: function(ev) {
ev = ev.browserEvent || ev;
if(ev.preventDefault) {
ev.preventDefault();
} else {
ev.returnValue = false;
}
},
,我所要关注的就是ev.cancelBubble = true。
window.event有一个属性叫做cancelBubble:
Boolean that specifies or receives one of the following values.
false
Default. Bubbling is enabled, allowing the next event handler in the hierarchy to receive the event.
true
Bubbling is disabled for this event, preventing the next event handler in the hierarchy from receiving the event.
在某些情况下需要屏蔽某些事件的话就可以使用这个属性。
还有就是要在异步事件注册之前就要把键盘监听默认的事件给STOP掉,要不不会起作用
Ext.app.SearchField = Ext.extend(Ext.form.TwinTriggerField, {
initComponent : function(){
Ext.app.SearchField.superclass.initComponent.call(this);
this.on('keydown', function(f, e){
if(e.getKey() == e.ENTER){
e.stopEvent();
this.onTrigger2Click();
}
}, this);
},
validationEvent:false,
validateOnBlur:false,
trigger1Class:'x-form-clear-trigger',
trigger2Class:'x-form-search-trigger',
hideTrigger1:true,
width:180,
hasSearch : false,
paramNames : {start:"start",limit:"limit",query:'query'},
enableKeyEvents: true,
onTrigger1Click : function(){
if(this.hasSearch){
this.el.dom.value = '';
var o = {};
o[this.paramNames.start]= 0;
this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramNames.query] = '';
this.store.reload({params:o});
this.triggers[0].hide();
this.hasSearch = false;
}
},
onTrigger2Click : function(){
var v = this.getRawValue();
if(v.length < 1){
this.onTrigger1Click();
return;
}
var o = {};
o[this.paramNames.start]= 0;
this.store.baseParams = this.store.baseParams || {};
this.store.baseParams[this.paramNames.query] = v;
this.store.reload({params:o});
this.hasSearch = true;
this.triggers[0].show();
}
});