ExtJs2.2的grid的2个Bug:滚动条以及点击点击行后发生偏移问题

简介:     最近用了很多开源的东西,发现开源的东西也是Bug如云,这不,又遇到了ExtJs2.2中的Grid的Bug。   bug1:出现纵向滚动条后,将横向滚动条拖到最后,然后会发现每选择一条记录整个grid就会往左移,右边空出一部份空白。  Bug2:出现横向滚动条后,向右稍拉滚动条,然后点击任意一行,会发现行内容向左偏移,滚动条向右越多,偏移越明显。================分

    最近用了很多开源的东西,发现开源的东西也是Bug如云,这不,又遇到了ExtJs2.2中的Grid的Bug。

   bug1:出现纵向滚动条后,将横向滚动条拖到最后,然后会发现每选择一条记录整个grid就会往左移,右边空出一部份空白。

  Bug2:出现横向滚动条后,向右稍拉滚动条,然后点击任意一行,会发现行内容向左偏移,滚动条向右越多,偏移越明显。

================

分析:经查Ex.t2.3已无此Bug,跟踪两个代码后总结如下(我可是跟踪了好久的)

Bug1:修改GridView.js文件

    // private
    updateAllColumnWidths : function(){
        var tw = this.getTotalWidth();
        var clen = this.cm.getColumnCount();
        var ws = [];
        for(var i = 0; i < clen; i++){
            ws[i] = this.getColumnWidth(i);
        }
        this.innerHd.firstChild.style.width = this.getOffsetWidth();
        this.innerHd.firstChild.firstChild.style.width = tw;
        this.mainBody.dom.style.width = tw;
        for(var i = 0; i < clen; i++){
            var hd = this.getHeaderCell(i);
            hd.style.width = ws[i];
        }

        var ns = this.getRows(), row, trow;
        for(var i = 0, len = ns.length; i < len; i++){
            row = ns[i];
            row.style.width = tw;
            if(row.firstChild){
                row.firstChild.style.width = tw;
                trow = row.firstChild.rows[0];
            for(var j = 0; j < clen; j++){
                   trow.childNodes[j].style.width = ws[j];
                }
            }
        }

        this.onAllColumnWidthsUpdated(ws, tw);
    },

    // private
    updateColumnWidth : function(col, width){
        var w = this.getColumnWidth(col);
        var tw = this.getTotalWidth();
        this.innerHd.firstChild.style.width = this.getOffsetWidth();
        this.innerHd.firstChild.firstChild.style.width = tw;
        this.mainBody.dom.style.width = tw;
        var hd = this.getHeaderCell(col);
        hd.style.width = w;

        var ns = this.getRows(), row;
        for(var i = 0, len = ns.length; i < len; i++){
            row = ns[i];
            row.style.width = tw;
            if(row.firstChild){
                row.firstChild.style.width = tw;
                row.firstChild.rows[0].childNodes[col].style.width = w;
            }
        }

        this.onColumnWidthUpdated(col, w, tw);
    },

    // private
    updateColumnHidden : function(col, hidden){
        var tw = this.getTotalWidth();
        this.innerHd.firstChild.style.width = this.getOffsetWidth();
        this.innerHd.firstChild.firstChild.style.width = tw;
        this.mainBody.dom.style.width = tw;
        var display = hidden ? 'none' : '';

        var hd = this.getHeaderCell(col);
        hd.style.display = display;

        var ns = this.getRows(), row;
        for(var i = 0, len = ns.length; i < len; i++){
            row = ns[i];
            row.style.width = tw;
            if(row.firstChild){
                row.firstChild.style.width = tw;
                row.firstChild.rows[0].childNodes[col].style.display = display;
            }

        }

        this.onColumnHiddenUpdated(col, hidden, tw);

        delete this.lastViewWidth; // force recalc
        this.layout();
    },


 

Bug2.向左偏移,见鬼,真不知道当时Extjs2.2测试咋做的。

    /**
     * Focuses the specified cell.
     * @param {Number} row The row index
     * @param {Number} col The column index
     */
    focusCell : function(row, col, hscroll){

这个函数写的写法有问题。竟然把Grid下方的坐标位置取错了,具体做法我是从Ext2.3上摘过来的。

可是这里不让贴附件。大家自己去这里下载http://download.csdn.net/detail/xzknet/4408844吧。



相关文章
|
4月前
|
前端开发 JavaScript
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
Elementplus如何使面包屑往左边移动,右边头像下拉菜单如何写,下拉菜单如何靠中一点,下拉菜单出现文字不对齐怎么办,如何设置鼠标样式,如何使用阿里妈妈icon,如何点击icon全屏
|
4月前
|
前端开发
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
139 0
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
uniapp滚动条置顶效果、自定义页面滚动条的位置(整理)
点击element-ui表格中的图标,上方显示具体的文字描述
点击element-ui表格中的图标,上方显示具体的文字描述
点击element-ui表格中的图标,上方显示具体的文字描述
Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项
Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项
801 0
Vant UI 中 van-collapse 下拉折叠面板如何默认展开第一项
PyQt5 技术篇-scrollArea不显示滚动条解决方法,Qt Designer不显示滚动条,滚动条的显示和隐藏
PyQt5 技术篇-scrollArea不显示滚动条解决方法,Qt Designer不显示滚动条,滚动条的显示和隐藏
801 0
PyQt5 技术篇-scrollArea不显示滚动条解决方法,Qt Designer不显示滚动条,滚动条的显示和隐藏
|
前端开发 Android开发
如何操作SAP UI5应用Footer区域工具栏按钮的背景颜色
如何操作SAP UI5应用Footer区域工具栏按钮的背景颜色
160 0
如何操作SAP UI5应用Footer区域工具栏按钮的背景颜色