ext框架Grid 美化

项目背景：

项目中有一堆页面用到了grid表格，其中表格中定义某些列是按钮，这些按钮都是原生样式，某天，突然想让这些按钮变得漂亮（华丽花哨）些，

怎么改呢？

解决思路：

第一个想到的是在每个页面中，定义这些按钮的地方，加上样式，如加个class="btn-info"。但是这么多个页面，每个改起来工作量大不说，还容易改漏了，不可取。

第二个想到的，是在页面渲染完毕后，调用某个js，遍历全部DOM节点，搜索符合条件的button，然后给button赋上class="btn-info"。然而，

Grid 表格本身就是在页面初始化后，再渲染的，找了好多资料，始终没有找到表格渲染结束后的执行的方法，此方法暂时行不通。

第三个想到的是改源码。表格中，自定义的列，最后还得给ext做渲染，我们可以在ext渲染的时候动手，把button赋上class="btn-info"

经调试，找到了ext渲染表格中自定义cell的地方，一个名为 renderCell的方法：

可以看到， if(d.renderer && render.call).....，这里应该就是ext渲染时，判断是否为自定义cell，而我们自定义的button肯定是自定义的cell，故在if里面做处理

其中，经调试知：

p: 就是自定cell的字符串语句，如"return 删除"这种

d.width：就是这个cell的宽度

修改样式后，会出现这样的问题：

原本这个cell所占的宽度是100，但是由于添加了样式，修改后宽度可能会达到150，但是这时grid表格是不会自动帮你调的，导致某些按钮显示不全。

为了解决这个问题，我们只能通过动态创建一个div，插入修改后的语句，动态创建修改后按钮，模拟显示，然后让浏览器渲染，渲染后，我们就可以获取修改后的宽度了，再把创建的dom删掉。

处理代码如下：

    if(p && p.tostring().indexOf("type='button'") != -1){
// console.log("处理前： "+arg)
                var objE = document.createElement("div");
                objE.setAttribute('style','visibility: hidden;display: inline-block');
                objE.innerHTML = p;
                for(var i=0;i<objE.children.length;i++){
                    var isButton = objE.children[i] && objE.children[i].tagName &&  objE.children[i].type &&
                        (objE.children[i].type == "button" || objE.children[i].type == "BUTTON") &&
                        (objE.children[i].tagName == "INPUT" || objE.children[i].tagName == "input");
                    if (isButton){
                        objE.children[i].classList.add("btn");
                        var isDeleteButton =  objE.children[i].value == "删除" || objE.children[i].value == "移除";
                        var isEditButton =  objE.children[i].value == "编辑";

                        if (isDeleteButton){
                            objE.children[i].classList.add("btn-danger");
                        }else if (isEditButton){
                            objE.children[i].classList.add("btn-info");
                        }else{
                            objE.children[i].classList.add("btn-primary");
                        }
                    }
                }
                // console.log("处理后： "+objE.innerHTML)
                //创建修改后的按钮，让浏览器渲染，获取宽度
                document.body.appendChild(objE);
                p = objE.innerHTML;
                var obWidth = objE.clientWidth || objE.offsetWidth || objE.scrollWidth;
                if (obWidth)d.width=obWidth+20;
                else d.width="55%";
                //删除创建的div
                while(objE && objE.hasChildNodes())
                {
                    objE.removeChild(objE.firstChild);
                }
            }

总结

修改后：

修改源码的渲染方法，不需要一个页面一个页面地去改了，可以一劳永逸。