(类的叫法可能不准确，但extjs就是这么写的)
Class Ext.grid.Column类的属性renderer对应函数参数说明可以参考ColumnModel.setRenderer( Number col, Function fn )
setRenderer需要设置行号，参数说明也在此，record参数就是Ext.data.record
Ext.data.record说明
data : Object
An object hash representing the data for this Record. Every field name in the Record definition is represented by a property of that name in this object. Note that unless you specified a field with name "id" in the Record definition, this will not contain an id property.
除了名为id的属性可以直接获取，其他属性都需要通过data获取
也可以直接record.get(属性名)获取；
感觉和jquery的grid相关插件很相似，似乎所有的js表格组件如属性等都很相似。
数据渲染
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>03.grid</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
/*
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex',renderer:function(value){
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'>红男</span>";
} else {
return "<span style='color:green;font-weight:bold;'>绿女</span>";
}
}},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn'}
]);
*/
function renderSex(value) {
if (value == 'male') {
return "<span style='color:red;font-weight:bold;'>红男</span><img src='user_male.png' />";
} else {
return "<span style='color:green;font-weight:bold;'>绿女</span><img src='user_female.png' />";
}
}
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
var str = "<input type='button' value='查看详细信息' onclick='alert(\"" +
"这个单元格的值是：" + value + "\\n" +
"这个单元格的配置是：{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
"这个单元格对应行的record是：" + record + "，一行的数据都在里边\\n" +
"这是第" + rowIndex + "行\\n" +
"这是第" + columnIndex + "列\\n" +
"这个表格对应的Ext.data.Store在这里：" + store + "，随便用吧。" +
"\")'>";
return str;
}
var cm = new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'性别',dataIndex:'sex',renderer:renderSex},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'descn',renderer:renderDescn}
]);
var data = [
['1','male','name1','descn1'],
['2','female','name2','descn2'],
['3','male','name3','descn3'],
['4','female','name4','descn4'],
['5','male','name5','descn5']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, [
{name: 'id'},
{name: 'sex'},
{name: 'name'},
{name: 'descn'}
])
});
store.load();
var grid = new Ext.grid.GridPanel({
autoHeight: true,
renderTo: 'grid',
store: store,
cm: cm
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="grid"></div>
</body>
</html>
行渲染，添加class
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="localXHR.js"></script>
<title>03.grid</title>
<style type="text/css">
.white-row{ background-color: white; }
.red-row{ background-color: #F5C0C0 !important; }
.yellow-row{ background-color: #FBF8BF !important; }
.green-row{ background-color: #99CC99 !important; }
</style>
<script type="text/javascript">
Ext.onReady(function(){
var PersonRecord = Ext.data.Record.create([
{name: 'name', type: 'string'},
{name: 'sex', type: 'int'},
{name: 'color', type: 'string'}
]);
var data = [
['boy', 0, '#FBF8BF'],
['girl', 1, '#99CC99'],
['man', 0, '#F5C0C0'],
['woman', 1, '#FFFFFF']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, PersonRecord)
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: 'name', dataIndex: 'name'},
{header: 'sex', dataInex: 'sex'}
],
autoHeight: true,
renderTo: 'grid',
viewConfig : {
forceFit : true,
enableRowBody : true,
getRowClass :function(record, rowIndex, p, ds) {
var cls = 'white-row';
switch (record.data.color) {
case '#FBF8BF' :
cls = 'yellow-row'
break;
case '#99CC99' :
cls = 'green-row'
break;
case '#F5C0C0' :
cls = 'red-row'
break;
}
return cls;
}
}
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="grid"></div>
</body>
</html>
单元格渲染
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="localXHR.js"></script>
<title>03.grid</title>
<script type="text/javascript">
Ext.onReady(function(){
function renderMotif(data, cell, record, rowIndex, columnIndex, store){
var value = record.get('color')
cell.attr = "style=background-color:" + value;
return data;
}
var cm = new Ext.grid.ColumnModel([
{header: 'name', dataIndex: 'name'},
{header: 'sex', dataInex: 'sex'},
{header: 'color', dataIndex: 'color', renderer: renderMotif}
]);
var PersonRecord = Ext.data.Record.create([
{name: 'name', type: 'string'},
{name: 'sex', type: 'int'},
{name: 'color', type: 'string'}
]);
var data = [
['boy', 0, '#FBF8BF'],
['girl', 1, '#FBF8BF'],
['man', 0, '#FBF8BF'],
['woman', 1, '#FBF8BF']
];
var store = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data),
reader: new Ext.data.ArrayReader({}, PersonRecord)
});
store.load();
var grid = new Ext.grid.GridPanel({
store: store,
cm: cm,
autoHeight: true,
renderTo: 'grid',
viewConfig : {
forceFit : true
}
});
});
</script>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script>
<div id="grid"></div>
</body>
</html>
相关推荐
EXTJS单元格变色、行变色实现方法详解 EXTJS是一个功能强大且流行的JavaScript框架，用于构建复杂的Web应用程序。其中，Grid Panel是EXTJS中最常用的组件之一，用于展示和编辑数据。本文将详细介绍EXTJS实现单元格...
在ExtJS中，图片渲染效果是实现用户界面美观和交互性的重要组成部分。本文将深入探讨ExtJS图片渲染的效果及其应用。 首先，我们要了解ExtJS中的图片渲染基础。在ExtJS中，图片通常以`Image`组件的形式出现，它可以...
在ExtJS 4.0中，我们可以利用`viewConfig`的`cellTpl`模板来控制单元格的渲染。通过修改`cellTpl`，我们可以实现合并单元格的样式。例如，我们可以添加一个条件判断来决定是否应用合并样式： ```javascript ...
总的来说，实现“Extjs 合并单元格”需要理解Ext JS的Grid Panel、Columns、渲染器工作原理，以及如何通过CSS和JavaScript操作DOM来达到合并效果。同时，还需要考虑用户体验和性能优化，确保合并功能的稳定性和效率...
EXTJS单元格合并 EXTJS单元格合并是指在EXTJS GridPanel中实现单元格合并的功能。单元格合并可以使得GridPanel中的数据显示更加简洁和清晰。下面将详细介绍EXTJS单元格合并的实现方法。 一、加入CSS样式 在实现...
ExtJS GridPanel 单元格无法复制问题解决方案 ExtJS 是一个功能强大的 JavaScript 框架，广泛应用于 Web 开发中。但是，在使用 ExtJS 的 GridPanel 组件时，可能会遇到单元格无法选中复制的问题，特别是在 IE ...
标题中的“extjs合并单元格”指的是在使用Ext JS这个JavaScript框架时，如何实现表格（Grid）中的单元格合并功能。Ext JS是一个用于构建富客户端Web应用的前端框架，提供了丰富的组件库，其中包括数据网格（Data ...
100行代码解决ExtJs4.1合并单元格问题
在ExtJs中，我们可以通过多种方式获取选中的行数据，具体取决于我们的选择模式是单选、多选还是单元格选择。 **1. 单选或多选模式** ```javascript var grid = Ext.getCmp('gridId'); var selectedRecords = grid....
在ExtJS中实现多行合并（rowspan）的效果，通常是为了在数据表格中展示具有层次结构的数据，或者在某些特定情况下需要对表格行进行合并，以优化数据的展示。这通常涉及到对表格（GridPanel）的配置和自定义。下面...
此案例主要涉及到了自定义 GridView 的 `renderHeaders` 方法来达到单元格合并的目的，并且还涉及了模板（Template）的使用、ColumnModel 的配置以及数据绑定等关键概念。 ### 一、Ext JS Grid 概览 Ext JS 是一个...
标题中的“extjs 数据导出到Excel,数据列自选”指的是使用EXTJS框架实现一个功能，让用户能够从Web应用中选择需要的数据列，并将这些选定的数据导出为Excel文件。EXTJS是一个强大的JavaScript库，专门用于构建富...
如果发现相邻单元格的值相同，则将它们合并，并保留其中一个单元格用于显示实际的数据值，而其他单元格则被设置为不可见（通常显示为空白）。 ```javascript // 合并单元格的函数，合并表格内所有连续的具有相同值...
可以使用分页、延迟渲染等技术来提高大型数据集的处理效率。 9. **扩展性与兼容性** - 确保动态Grid的实现具有良好的扩展性和跨浏览器兼容性，因为这直接影响到应用的用户体验。 10. **实战应用** - 动态Grid常...
总结来说，EXTJS的GridPanel添加“合计”行涉及到View的自定义、数据计算、模板创建、DOM操作以及样式调整等多个环节。通过以上步骤，我们可以实现一个动态更新且具有美观样式的“合计”行。这不仅增强了数据展示的...
ExtJS 4.2 Grid组件本身并没有提供单元格合并功能，需要自己实现这个功能。 目录 1. 原理 2. 多列合并 3. 代码与在线演示 1. 原理 1.1 HTML代码分析 首先创建一个Grid组件，然后查看下的HTML源码。 1.1.1 Grid组件 ...
这包括将数据转换为二维数组，每一行代表一个Grid记录，每一列对应记录的一个字段。 4. **创建并写入工作簿**：利用SheetJS创建一个新的工作簿对象，然后将转换后的数据添加到新的工作表中。 5. **生成Excel文件**...
结合使用这些组件和方法，可以在用户界面上创建可交互的表格，表格中的每一行都可以绑定到Store的一个记录，用户可以编辑这些字段，数据会自动同步到后台。 总结，ExtJS的数据绑定和修改功能为开发人员提供了一种...
使用ExtJs获取后台json格式的数据必须的七个jar包，commons-beanuti-1s-1.7.0.jar，commons-collections-3.1.jar，commons-lang-2.5.jar，commons-logging-1.0.4.jar，ezmorph-1.0.4.jar，json-lib-2.1.jar，...