因为最近学习了一些ExtJs相关的知识，也解决了一些自己想要的效果，在此记录一下。
1.如何在grid里调出一个colorMenu来
2.如何设置grid里某些行可以编辑，某些行不可以编辑，某些行的行颜色不一样，某些行某些列的字体颜色等样式不一样
3.如何控制一些行的checkbox不可以点击，一些可以点击
4.如何设置拖拽的时候，符合条件的才可以拖拽过去，不符合条件的不可以拖拽过去
那么首先看第一个问题：
这也是我第一个弄了好久才弄出来的问题，因为一开始对Extjs不熟悉，所以搞了老半天，其实很简单：
listeners:{
click(_this, The, rowIndex, e){
//new 一个colorMenu
var colorMenu = new Ext.menu.ColorMenu({
handler: function(cm, color){//选择colorMenu上的一个颜色的时候
secondGrid.store.getAt(rowIndex).set(_this.dataIndex,color);//把颜色在该cell上进行修改
}
});
colorMenu.showAt(e.getXY());//把colorMenu显示在click时的e的位置上
}}}
接着，我们来看第二个问题：
2.怎么才能让grid的一些行不能编辑呢，其实也是比较简单的。
listeners:{
//e表示edit event object,包含：grid,record,field,value,row,column,cancel
beforeedit:function(e){
//如果该行是indoor是false的，则不可以编辑
if(secondGrid.store.getAt(e.row).data['editable']==false){
return false;
}
}}
这个就是要在grid里面设置listeners,在listeners里面设置beforeedit，然后beforeedit就会根据行的某个条件来return false或者true，false就是不可编辑，true就是可以编辑。
但是这个edit只是对textField有效，对checkColumn,actionColumn这些不是普通的没有效果，对1.写的colorMenu也没有效果
3.还有就是怎么设置某些行的背景颜色不一样呢？
viewConfig:{
getRowClass:function(record, index, rowParams, store){
if(record.data['editable']==false){
return "row-public";
}
}
}
这里是用viewConfig里的getRowClass，通过返回class,可以改变行的样式，这个必须是返回css样式里的某个class才行
比如
.row-public{
background-color:#ff0000;
}
4.说到怎么控制某些行的字体颜色等的不一样，这个我在getRowClass里没有设置成功，我换成在每列根据条件进行renderer来实现。
if(record.data['editable']==false){
return "<span style='color:"+noEditorColor+";'>"+value+" </span>";
}
else{
return "<span style='color:black;'>"+value+" </span>"
}
这个需要注意的就是要返回一段字符串，然后ExtJs会把这段字符串当成HTML语句显示在该cell里
5.怎么控制某些行的checkColumn不能点击，这个呢我也是百度了很多，由各种组合起来给的灵感，下面是该checkcolumn的总体设置，某些不必要的元素可以省略
xtype:'checkcolumn',
id:'public',
header:'Public',
50,
sortable:true,
align:'center',
dataIndex:'public',
listeners: {
click: function(col, grid, rowIndex, e){
if(secondGrid.getStore().getAt(rowIndex).data['editable']== true){
var value = secondGrid.getStore().getAt(rowIndex).get(col.dataIndex);
secondGrid.getStore().getAt(rowIndex).set(col.dataIndex, !value);
}
}
},
renderer:function(value, metaData, record, rowIndex, colIndex, store) {
metaData.css += ' x-grid3-check-col-td';
/////////控制某些checkcolumn可以编辑，某些不可以编辑
if (store.getAt(rowIndex).data['editable']== false&&store.getAt(rowIndex).data['public']==true){
return "<img src='/modules/projectd/threshold_line/pic/checkNoEdit.gif'>";
}else if(store.getAt(rowIndex).data['editable']== false&&store.getAt(rowIndex).data['public']==false){
return "<img src='/modules/projectd/threshold_line/pic/uncheckbox.gif'>";
}
else{
return String.format('<div class="x-grid3-check-col{0}"> </div>', value ? '-on' : '');
}
}
主要呢是在renderer里实现的根据某些条件，返回一些样式
6.是如何只有一些可以拖拽，一些不可以拖拽
这个我就是在
listeners:{
render:function(){
new Ext.dd.DropTarget(this.el, {
ddGroup : 'secondGridDDGroup',
notifyDrop : function(ddSource, e, data){
var DefaultRecords = ddSource.dragData.selections;
var records=new Array();
//从selectionModel中挑出editable为true的
for(var i=0;i<DefaultRecords.length;i++){
if(DefaultRecords[i].data['editable']==true){
records.push(DefaultRecords[i]);
}
}
if(records.length>0){
Ext.each(records, ddSource.grid.store.remove, ddSource.grid.store);
firstGrid.store.add(records);
}
return true
}
});
}
就是在被拖拽的数据里面把可以拖拽的挑出来。
以上是我这几天主要解决的一些问题，想到更多的再补。