extjs3 样式四：设置鼠标悬停行颜色

方式一覆盖原有的样式（如果没效果，请尝试清除浏览器缓存试试，大多框架静态样式都会在本地生成缓存，不清除修改不会生效）。新建一个CSS文件，该文件的加载顺序放后面就行，复制以下代码

.x-grid3-row-over {
	border-color: #6666ff !important;
	background-color: #6699ff !important;/* 鼠标悬停行颜色  */
	  background-image:url(../images/default/grid/row-over.gif) !important;
	cursor:hand !important; 
}

方式二通过JS代码来控制

需要用到鼠标悬浮和离开事件，这里仅以悬浮事件为例。鼠标离开事件，需要在写之前的的的console.log（xxxview.className）看一看

原来的CSS样式，当鼠标离开时，返回原来的样式便可

//鼠标悬浮事件
	grid.on('mouseover',function(obj, rowindex, e){
		var  idGrid =  Ext.getCmp("CustomerGrid");
		//获取鼠标所在行index
		var index = idGrid.getView().findRowIndex(obj.getTarget());
		//获取被选中行，不管有多少行被选中，只要有一行被选中，sm.isSelected(rowIndex)返回true
		//如果没有被选中的行，rowIndex=-1
		var sm = idGrid.getSelectionModel();
//		var selectedRow =sm.getSelected();
//		var rowIndex = idGrid.store.indexOf(selectedRow); 
//		//判断鼠标悬浮行是否被选中
//		if(sm.isSelected(rowindex)){
//		 	alert("改行被选中")
//		}
		if(typeof index=="number"){
			var mousoverView = idGrid.getView().getRow(index);
			if(sm.isSelected(index)==false){ //没有被选中，鼠标悬浮时，改变样式
				//下面这行代码是关键，x-grid-over-row 样式是自己定义的css样式，x-grid3-row是系统的不用管，直接加上就行
				 mousoverView.className ="x-grid3-row x-grid-over-row";//改变样式
			}
		}
//		//设置选中行
	});