Extjs4 RowEditing Update 按钮的背景色改变

问题的提出

Extjs4 的 RowEditing 提供了在 Ext.grid 上行编辑功能，当双击编辑行时，如下图：

这里可以看到处于编辑状态了，但是按钮“修改”和“取消”和下一行数据叠在一起，非常不明显，操作员很容易遗忘，导致最后数据没有编辑改变，界面不友好。所以我的目的是要改成下边的样式，以便提醒操作员，如下图：

这样按钮醒目一些，操作员不容易忘记，界面也会友好一些。

解决问题的思路

找到这个按钮的 ID ，获取对象，改变背景色就可以了。在调试时发现，

1. 如果在对应的CSS文件中如果改变了按钮的背景色，所有按钮的背景色都会改变，不可取；
2. RowEditing 是插件机制，在调试的 elements 中 按钮 ID 是动态产生，无论用 Extjs，JQuery 或者 javascript 都不能抓到，此路不通。
3. Baidu，Google 都搜遍了，没有可参考的方法，没想到一个小问题，三天没有任何进展。
   看来，问题的关键还是 ID 问题，抓到对象，就有修改编辑样式的可能，继续努力。

还是源代码管用

咬着牙，看 Extjs4 的源代码是怎么使用和调用的，总算看出来问题：

1. 这个插件，可以在定义时取到对象，
   var rowEditor = grid.plugins[0].getEditor();
2. rowEditor 有个默认的值 rowEditor.buttonUI = “default”;
   由于没有耐心完全追踪代码，没有发现 buttonUI 还有其它值，默认值应该调用的 CSS 的 class 是 x-row-editor-update-button{margin-right:2px}；x-row-editor-cancel-button{margin-left:2px} 修改为：x-row-editor-update-button{margin-right:2px;background-color:#FFAA88;}
   x-row-editor-cancel-button{margin-left:2px;background-color:#FFAA88;}
   我的CSS文件是：ext-theme-classic-all.css，你可以根据自己选择的主题样式找相应的文件。
   把按钮格式定义在 beforeedit 方法中，编辑以后的事，其它的文章写的挺详细的，不多说了。
   经过测试，还需要把默认改成 “”，rowEditor.buttonUI = “”;样式起作用了。

完整代码如下

        var grid = Ext.create("Ext.grid.Panel", {
            id: 'grid',
            renderTo: document.getElementById("myTest"),
            viewConfig: {
                enableTextSelection: true
            },
            height: GridHeight,
            columnLines: true,
            store: store1,
            plugins: [
                Ext.create('Ext.grid.plugin.RowEditing', {
                    saveBtnText: '修改', //改成需要文本
                    cancelBtnText: "取消", //改成需要文本
                    clicksToEdit: 2,
                    listeners: {
                        beforeedit: function (ed, e, eop) {

                            if (rolename.indexOf("物资计划员") == -1 ) {
                                e.cancel = true;
                                Ext.Msg.alert("警告", "没有编辑权限！");
                            }
                                                            
                            var rowEditor = grid.plugins[0].getEditor();
                            rowEditor.buttonUI = "";
                        }

                    }
                })
            ],
			
			//其它代码略
            columns: [],
			tbar: [],

最后几句话

虽说是个小众问题，也费力好几天功夫，也经常使用别的程序员经验，写出来，抛砖引玉吧，知道了方法，可以改的更好看，就这样吧。