ExtJS下grid的一些属性说明
作者：
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
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