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){
if(record.data.descrip != "")
{
p.attr='ext:qtip="add to playlist" style="background-image:url(/imgs/icn_view.gif) !important; background-position: center 2px; background-repeat: no-repeat;cursor: pointer;"';
}
}
函数中的record.data是grid的数据,而着色的就是要添加的图片的路径和图片名。

4.当显示内容的字数超过单元格可以显示的字数时，如何让其自动换行(how to wrap text when the length of characters is more than the width of the column):
设置这些单元格的所用类的css即可。 如：
.x-grid3-cell-inner{
white-space:normal;
overflow:visible;
}
需要注意的是：overflow的默认值是hidden. 当加上white-space之后，本来wrap就可以了，但是单元格的高度还是一行的高度，所以数据除了第一行，其它都看不到。只有把overflow的值改为visible后，单元格所在行的高度才会随着数据的行数而调整。

5.当一开始进入页面时，让所有的group除了第一个group展开(collapsed)外，其它的group都合上(folded):
首先通过设置属性startcollapsed让所有group都合上: startcollapsed:true;
然后在store.load({callback: function(records,o,s) {togglefirstgroup();} })中调用函数把第一个group展开:
//gridview是该grid所用的view, 如(var gv = new ext.grid.groupingview({});).

function togglefirstgroup(gridview)
{
var grnum = gridview.getgroups().length;
for (var i = 0; i < grnum ; i++)
{
var firstgroupid = gridview.getgroups()[i].id;
if(firstgroupid && firstgroupid != "")
{
gridview.togglegroup(firstgroupid);
break;
}
}
}

6.date format: 数据为9/24/2008
1).这种format的结果是：web sep 24 00:00:00 utc+0800 2008
{
header: dheader,
width: 90,
sortable: true,
dateformat: 'y-m-d', //dateformat是'm/d/y'的话，得到的结果一样
dataindex: 'date'
},
2). 这种format的结果是: 2008-09-24
{
header: dheader,
width: 90,
sortable: true,
renderer: ext.util.format.daterenderer('y-m-d'), //format是'm/d/y'，结果是”09/24/2008”
dataindex: 'date'
},
找到的一些关于class date的format及其输出的描述(http://extjs.com/deploy/ext/docs/output/date.html):
****************************
format output description
------ ---------- --------------------------------------------------------------
d 10 day of the month, 2 digits with leading zeros
d wed a textual representation of a day, three letters
j 10 day of the month without leading zeros
l wednesday a full textual representation of the day of the week
s th english ordinal day of month suffix, 2 chars (use with j)
w 3 numeric representation of the day of the week
z 9 the julian date, or day of the year (0-365)
w 01 iso-8601 2-digit week number of year, weeks starting on monday (00-52)
f january a full textual representation of the month
m 01 numeric representation of a month, with leading zeros
m jan month name abbreviation, three letters
n 1 numeric representation of a month, without leading zeros
t 31 number of days in the given month
l 0 whether it's a leap year (1 if it is a leap year, else 0)
y 2007 a full numeric representation of a year, 4 digits
y 07 a two digit representation of a year
a pm lowercase ante meridiem and post meridiem
a pm uppercase ante meridiem and post meridiem
g 3 12-hour format of an hour without leading zeros
g 15 24-hour format of an hour without leading zeros
h 03 12-hour format of an hour with leading zeros
h 15 24-hour format of an hour with leading zeros
i 05 minutes with leading zeros
s 01 seconds, with leading zeros
o -0600 difference to greenwich time (gmt) in hours
t cst timezone setting of the machine running the code
z -21600 timezone offset in seconds (negative if west of utc, positive if east)
**********************************
下面是一些format的格式及其对应结果：数据同上,用renderer: ext.util.format.daterenderer(format)
“y-m-d” --> 2008-09-24
“y-m-d” --> 08-09-24
“f j, y” --> september 24, 2008
“f j, y” --> september 24, 08
“f j, y, g:i a” --> september 24, 2008, 12:00 am