在代码中已经注释了plugins,因为没注释的话,使用getRowClass改变行的CSS不起作用。
另外想用行扩展的话,把plugins:expander的注释去掉即可,不过这样行的CSS就失效了。
//plugins:expander,
在页面中添加RowExpander.js文件引用,文件见附件。
<script type="text/javascript" src="RowExpander.js"></script>
CSS:
.x-grid-record-red table{
background-color: #FF0000;
color: #0000FF;
}
JS code:
Ext.onReady(function () {
Ext.QuickTips.init();
var reader = new Ext.data.ArrayReader({},
[{
name: 'name'
},
{
name: 'school'
},
{
name: 'sport'
},
{
name: 'year',
type: 'date',
dateFormat: 'Y-m-d'
},
{
name: 'desc'
}]);
var store = new Ext.data.Store({
data: data,
reader: reader,
sortInfo: {
field: 'name',
direction: 'desc'
}
});
var expander = new Ext.grid.RowExpander({
tpl: new Ext.Template('<p><b>Name:</b> {name}</p><br>', '<p><b>Summary:</b> {desc}</p>')
});
var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([expander, new Ext.grid.RowNumberer(), sm, {
header: '姓名',
sortable: true,
width: 160,
dataIndex: 'name'
},
{
header: '入学年份',
sortable: true,
width: 160,
dataIndex: 'school',
editor: new Ext.form.TextField({
allowBlank: false
})
},
{
header: '运动爱好',
sortable: true,
width: 160,
dataIndex: 'sport'
},
{
header: '入学年份',
sortable: true,
width: 160,
dataIndex: 'year',
renderer: Ext.util.Format.dateRenderer('Y-m-d')
}]);
grid = new Ext.grid.GridPanel({
title: 'Grid',
store: store,
cm: cm,
width: 600,
height: 500,
frame: true,
enableDragDrop: true,
sm: sm,
viewConfig: {
forceFit: true,
getRowClass: function (record, index, rowParams, store) {
if ('hohai' == record.get('school')) {
return 'x-grid-record-red';
}
}
},
//plugins:expander,
collapsible: true,
tbar: [{
text: 'Add Something',
tooltip: 'Add a new row',
iconCls: 'add',
handler: function () {
alert("Add Something");
}
},
'|', {
text: 'Options',
tooltip: 'Blah blah blah blaht',
iconCls: 'option'
},
'|', {
text: 'Remove Something',
tooltip: 'Remove the selected item',
iconCls: 'remove'
}],
renderTo: document.body
});
});
var data = [
['rowen', 'hohai', 'basketball', '2004-11-01'],
['rowen', 'luoyizhong', 'football', '2000-09-01'],
['rowen', 'jianzhong', 'pingpong', '1992-09-01'],
['rowen', 'jianxiao', 'pingpong', '1992-09-01']];
for (var i = 0; i < data.length; i++) {
data[i].push('OMG');
}
分享到:
相关推荐
ExtJs GridPanel双击事件获得双击的行,双击行可以选中前面的checkbox,并获得行号
通过Servlet让Extjs GridPanel 显示数据库数据
此文件用于项目首页内容,使用了ExtJs中的GridPanel
ExtJS的GridPanel导出excel文件,方便快捷易懂!
Extjs gridpanel 出现横向滚动条问题的解决方法,在gridpanel中加入以下代码即可。
一个关于GridPanel的使用例子 介绍了Proxy,JsonReader Store gridPanel等几个对象的简单使用
NULL 博文链接:https://xiaohewoai.iteye.com/blog/409898
NULL 博文链接:https://topbox163.iteye.com/blog/1276463
主要介绍了Extjs gridpanel 中的checkbox(复选框)根据某行的条件不能选中的解决方法,需要的朋友可以参考下
EXTJS.GRIDPANEL中日期格式 设置
ExtJs GridPanel中实现增删改效果的代码,需要的朋友可以参考下。
Extjs2.02 Gridpanel加载本地数组资源的实例,思路相当清晰。对初学者很有用
ExtJS下GridPanel 根据条件改变字体颜色的实现代码。
主要介绍了ExtJs中gridpanel分组后组名排序实例代码,有需要的朋友可以参考一下
本人自己写的Extjs入门教程,上面实现了treePanel和GridPanel的集成和交互。
NULL 博文链接:https://tayuexiaotian.iteye.com/blog/1092730
NULL 博文链接:https://aa00aa00.iteye.com/blog/564647
NULL 博文链接:https://tonylian.iteye.com/blog/1735525