最近公司产品需要搞个web聊天,ext写这类东西比较快捷方便,但是由于不想使用收费版本,所以采用2.02的免费版本,很多地方需要自己修正,以后会陆续把在实践中遇到的问题和技巧记录下来。
1、htmlEditor
(1)htmlEditor在弹出框后自动获取焦点,htmlEditor在弹出框中出现时,工具栏是灰色的,需要点击获得焦点和是工具栏激活。一般聊天时希望打开窗口就获得焦点,如果在extDialog.show();之后写focus之类的依旧是拿不到焦点,原因就是,ext的show事件是个延迟的事件,所以需要在show的回调函数中进行处理,如下:
extDialog.show(opener,function(){editor.updateToolbar();editor.deferFocus();});
注意红色字体,不要写成focus(),这个方法没有效果;因为源码里面写的也是deferFocus();
2、ext2.02关于颜色menu和datefield在IE8下显示宽度的修正
Ext.override(Ext.menu.Menu, {
autoWidth: function() {
this.width += "px";
}
});
3、ext.element的滚动条事件的修正
Ext.override(Ext.Element, {
scrollTo : function(side, value, animate){
var side = side.toLowerCase();
var prop;
switch (side) {
case "left":
prop = "scrollLeft";
break;
case "right":
prop = "scrollLeft";
value = this.dom.scrollWidth - (value + this.dom.clientWidth);
break;
case "top":
prop = "scrollTop";
break;
case "bottom":
prop = "scrollTop";
value = this.dom.scrollHeight - (value + this.dom.clientHeight);
break;
}
if (value < 0) value = 0;
if(!animate || !A){
this.dom[prop] = value;
}else{
var to = prop == "scrollLeft" ? [value, this.dom.scrollTop] : [this.dom.scrollLeft, value];
this.anim({scroll: {"to": to}}, this.preanim(arguments, 2), 'scroll');
}
return this;
}
});
4、修复Ext.grid.CheckboxSelectionModel不能自动判断全选的bug
if (Ext.grid.CheckboxSelectionModel) {
var interceptOnMouseDown = Ext.grid.CheckboxSelectionModel.prototype.onMouseDown.createInterceptor(
function(e, t){
this.on('rowdeselect', this.handleDeselect, this);
this.on('rowselect', this.handleSelect, this);
}
);
Ext.override(Ext.grid.CheckboxSelectionModel,{
hd : null,
onMouseDown : interceptOnMouseDown,
handleSelect:function(){
if(this.grid.store.getCount()!=this.selections.length)
return;
var hd = Ext.fly(this.grid.getView().innerHd).child('div.x-grid3-hd-checker');
if(!hd.hasClass('x-grid3-hd-checker-on'))
hd.addClass('x-grid3-hd-checker-on');
},
handleDeselect:function(){
if( this.grid.store.getCount() != this.selections.length +1)
return;
var hd = Ext.fly(this.grid.getView().innerHd).child('div.x-grid3-hd-checker');
if(hd.hasClass('x-grid3-hd-checker-on'))
hd.removeClass('x-grid3-hd-checker-on');
}
});
}
5、使ext.textField的非空判断能够判断空格
Ext.apply(Ext.form.TextField.prototype, {
validator : function(text) {
if (this.allowBlank == false && Ext.util.Format.trim(text).length == 0) {
return false;
} else {
return true;
}
}
});
6、给form.labelField添加设置文字的方法,ext2.02无此方法
Ext.apply(Ext.form.Label.prototype,{
setText: function(t, encode){
this.text = t;
if(this.rendered){
this.el.dom.innerHTML = encode !== false ? Ext.util.Format.htmlEncode(t) : t;
}
return this;
}
});
7、给ext2.02添加两次密码输入验证的验证方法
Ext.apply(Ext.form.VTypes, {
password : function(val, field) {
if (field.initialPassField) {
var pwd = Ext.getCmp(field.initialPassField);
return (val == pwd.getValue());
}
return true;
},
passwordText : '两次输入的密码不一致!'
});
注:initialPassField为第一次密码输入框的ID