日期:2014-05-16  浏览次数:20345 次

ExtJS下grid的一些属性说明

1.界面修改(css style):?
Extjs中界面风格与我们产品本身的风格有很大不同,从边框、选中行的颜色到鼠标移动到的行的颜色、菜单等,几乎都不同。Extjs对这些样式的设置都是由css完成的。如:?
选中行的颜色就可用如下设置完成:?
.x-grid3-row-selected{background:#c6e2ff!important;}?
其他的都类似,只要找到对应的class, 然后设置要修改的部分即可。?

2. 属性的作用(About Ext.grid. GroupingView, EditorGridPanel):?
Extjs的grid功能强大,如排序、隐藏列或移动列等,这些都有一些属性与其对应,可以选择要还是不要。其中一些的属性和其作用如下:?
*. EditorGridPanel:?
border: false, //grid的边界?
autoHeight: true, //grid的高度是否要用指定的高度?
enableColumnMove: false, //grid的列是否可以移动?
enableHdMenu: false, //在列的header是否要有下拉菜单?
trackMouseOver: true, //当鼠标移过行时,行是否要highlight?
stripeRows: true, //让grid相邻两行背景色不同?
*. GroupingView:?
在要显示的数据中,根据它们的某个数据点进行分组,分组显示。这个数据点由*.GroupingStore中的groupField决定。*.GroupingView设置这个分组显示的grid的一些关于组的显示属性。如:?
forceFit:true, //是否根据grid的宽度调整列的宽度,防止水平scrollbar的出现?
enableGroupingMenu: false, //控制header的下拉菜单中是否有group的选项(Group By This Field, Show in Groups(checkbox))?
showGroupName: true,?
//用来分组的数据点这一列的header是否要随group name一起显示?
hideGroupedColumn: true, //用来分组的数据点这一列是否要显示?
startCollapsed: false, //一开始进到grid这页,它的group是合起还是展开?
scrollOffset: -1, //为垂直的scrollbar留下的space(默认是19px)?

3.在单元格中添加图片:?
在Ext.grid.ColumnModel中对应于加图片的列,用它的render链接到一个函数进行添加。如:?
var colModel = new Ext.grid.ColumnModel([?
{header:”com”, render: AddImgs.createDelegate(this)},?
{header:”test”, width:200, sortable:false}?
]);?
响应函数如下:?
AddImgs = function(value,p,record){?