编写js文件
1. 数据,要显示到页面上的数据
var myData = [
[
1,
{
text: 'Ext',
url: 'http://extjs.com'
},
-10.00,
'2008-01-01 12:01:01',
'br.gif',
'Atlantic Spadefish.jpg',
{
text: '一',
tips: '提示1'
}
],
[
2,
{
text: 'Google',
url: 'http://www.google.cn'
},
1.00,
'2008-02-16 12:01:02',
'fr.gif',
'Bat Ray.jpg',
{
text: '二',
tips: '提示2'
}
],
[
3,
{
text: '新浪',
url: 'http://www.sina.com.cn'
},
0,
'2008-03-15 12:01:03',
'cu.gif',
'Blue Angelfish.jpg',
{
text: '三',
tips: '提示3'
}
],
[
4,
{
text: '雅虎',
url: 'http://www.yahoo.com.cn'
},
10.01,
'2008-04-14 12:01:04',
'es.gif',
'Bluehead Wrasse.jpg',
{
text: '四',
tips: '提示4'
}
],
[
5,
{
text: 'CSDN',
url: 'http://www.csdn.net'
},
200.90,
'2008-05-13 12:01:05',
'cn.gif',
'Cabezon.jpg',
{
text: '五',
tips: '提示5'
}
]
];
装载入Ext.data.SimpleStore
把数据装载到一个简单的Store中
var store = new Ext.data.SimpleStore({
// 设置 编号, 链接, 数字, 时间, 图标, 图片提示, 文字提示
fields: [
{
name: 'id',type: 'int' //编号
},{
name: 'linker'//链接
},{
name: 'number',type: 'float'//数字
},{
name: 'datetime',type: 'date',dateFormat: 'Y-m-d H:i:s'//时间
},{
name: 'icon'//图标
},{
name: 'qtips'//图片提示
},{
name: 'tips'//文字提示
}]
});
store.loadData(myData);
用最常用的GridPanel显示数据
//定义方法，为数据载入表格时候有不同的显示
function leftPadfun(val){
return String.leftPad(val, 5, "0");
}
/**
* 根据text: , url 生产一条完整的链接
*/
function linkerfun(val){
if (typeof val == 'object') {
return '<a style="display:table;width:100%;" title="' + val.url + '" target="_blank" href="' + val.url + '">' + val.text + '</a>'
}
return val;
}
/**
* 根据数值的大小分别显示不同的颜色
* 大于0 显示为绿色
* 小于0 显示为红色
*/
function numfun(val){
if (val > 0) {
return '<span style="color:green;">' + val + '</span>';
}
else
if (val < 0) {
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
/**
* 得到图标的应用
*/
function iconfun(val){
return '<img src="images/' + val + '">'
}
/**
* 得到提示图片
* 添加qtip属性
* 要在HTML中使用QuickTip显示提示，只要在标记中加入qtip属性就可以了
* Ext.QuickTips.init();进行初始化
*
*/
function qtipsfun(val){
return '<span style="display:table;width:100%;" qtip=\'<img src="images/' + val + '">\'>' + val + '</span>'
}
/**
* 包含提示的文字
*/
function tipsfun(val){
if (typeof val == 'object') {
return '<span style="display:table;width:100%;" title="' + val.tips + '">' + val.text + '</span>'
}
return val
}
var grid = new Ext.grid.GridPanel({
height: 350,
width: 800,
store: store,
title: '自定义单元格的显示格式',
frame: true,
columns: [{
header: '编号',
width: 80,
sortable: true,
renderer: leftPadfun,
dataIndex: 'id'
}, {
header: "链接",
width: 75,
sortable: true,
renderer: linkerfun,
dataIndex: 'linker'
}, {
header: "数字",
width: 75,
sortable: true,
renderer: numfun,
dataIndex: 'number'
}, {
header: "时间",
width: 85,
sortable: true,
renderer: Ext.util.Format.dateRenderer('Y-m-d'),
dataIndex: 'datetime'
}, {
header: "图标",
width: 75,
sortable: true,
renderer: iconfun,
dataIndex: 'icon'
}, {
header: "图片提示",
width: 75,
sortable: true,
renderer: qtipsfun,
dataIndex: 'qtips'
}, {
header: "文字提示",
width: 75,
sortable: true,
renderer: tipsfun,
dataIndex: 'tips'
}],
stripeRows: true,
autoExpandColumn: 5,
listeners: {
// 定义列单击时间监听
// rowclick: function(trid, rowIndex, e){
// Ext.get('op').dom.value += '------------------------\n' +
// Ext.encode(store.getAt(rowIndex).data) +
// '\n';
// }
rowclick : rowclickevent
}
});
// 对QuickTips进行初始化
Ext.QuickTips.init();
function rowclickevent(trid, rowIndex, e)
{
Ext.get('op').dom.value += '------------------------\n' +
Ext.encode(store.getAt(rowIndex).data) + '\n';
}
在html文件中显示出来
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>自定义单元格的显示格式</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- 引入必要的Ext库文件-->
<link rel="stylesheet" type="text/css" href="../Extjs/resources/css/ext-all.css" />
<!-- EXT LIB -->
<script src="../Extjs/adapter/ext/ext-base.js"></script>
<script src="../Extjs/ext-all.js"></script>
<script type="text/javascript" src="1_Grid.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.Msg.minWidth = 300;
// 把表格加载到id为panell的div中
grid.render('panel1');
// 设置textarea为空
Ext.get('op').dom.value = "";
})
</script>
</head>
<body>
<h1 style="margin:20px 0px 0px 20px;">第4章 自定义单元格的显示格式</h1>
<br/>
<div style="padding-left:20px;">
<div id="panel1">
</div>
<br>
<div>事件：</div>
<textarea id='op' rows="10" style="width:800px;"></textarea>
<br/>
</div>
</body>
</html>