Ext2.02的一些总结
最近公司产品需要搞个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