<!DOCTYPE
HTML PUBLIC "-//W<chmetcnv tcsc="0" numbertype="1" negative="False" hasspace="False" sourcevalue="3" unitname="C" w:st="on">3C</chmetcnv>//DTD
HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html
debug='true'>
<head>
<title>自定义单元格的显示格式</title>
<meta
http-equiv="content-type" content="text/html;
charset=utf-8">
<link rel="stylesheet"
type="text/css"
href="../lib/ext/resources/css/ext-all.css" />
<script
type="text/javascript" src="../lib/ext/ext-base.js"></script>
<script type="text/javascript"
src="../lib/ext/ext-all.js"></script>
<script type="text/javascript"
src="../lib/ext/locale/ext-lang-zh_CN.js"></script>
<style>
</style>
</head>
<body>
<h1 style="margin:20px 0px
0px 20px;">第4章 自定义单元格的显示格式</h1>
<br />
<div
style="padding-left:20px;">
<p>
<div
id="panel1"></div><br>
<div >事件:</div>
<textarea id='op' rows="10"
style="width:800px;"></textarea>
</p>
<br />
</div>
<script>
var app={};
Ext.onReady(function(){
Ext.state.Manager.setProvider(new
Ext.state.CookieProvider());
Ext.QuickTips.init();
Ext.Msg.minWidth=300;
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'}],
[6,{text:'微软',url:'http://www.microsoft.com'},-200.01,'2008-06-12
12:01:06','us.gif','California Moray.jpg',{text:'六',tips:'提示6'}]
];
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);
function leftPad(val){
return
String.leftPad(val,5,"0");
}
function linker(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;
}
function num(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 icon(val){
return
'<img src="./images/gif/'+val+'">'
}
function qtips(val){
return
'<span style="display:table;width:100%;" qtip=\'<img
src="images/'+val+'">\'>'+val+'</span>'
}
function tips(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:leftPad, dataIndex:'id'},
{header: "链接", width:75, sortable:
true, renderer: linker, dataIndex: 'linker'},
{header: "数字", width:75, sortable:
true,renderer: num, dataIndex: 'number'},
{header: "时间", width:85, sortable:
true, renderer: Ext.util.Format.dateRenderer('Y-m-d'), dataIndex:
'datetime'},
{header: "图标", width:75, sortable:
true,renderer: icon, dataIndex: 'icon'},
{header: "图片提示", width:75, sortable:
true,renderer: qtips, dataIndex: 'qtips'},
{header: "文字提示", width:75, sortable:
true,renderer: tips, 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';
}
}
});
grid.render('panel1');
Ext.get('op').dom.value="";
})
</script>
</body>
</html>
|
相关推荐
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part3 因为源代码比较大,压缩后76M左右 所以分为四个包上传
JavaScript凌厉开发——Ext详解与实践_源码清单.rarJavaScript凌厉开发——Ext详解与实践_源码清单.rarJavaScript凌厉开发——Ext详解与实践_源码清单.rar
JavaScript凌厉开发:Ext详解与实践(下).pdf
JavaScript凌厉开发——Ext详解与实践
JavaScript凌厉开发——Ext详解与实践_源码清单JavaScript凌厉开发——Ext详解与实践_源码清单JavaScript凌厉开发——Ext详解与实践_源码清单
本人收集的EXT详解,EXT开发中组件详解
JavaScript凌厉开发Ext详解与实践(源码) 清华大学出版社 张鑫 黄灯桥 杨彦强 编著
Ext详解与实践 word版2,3,10,11官方样章,最全的样章.精心收集。
Javascript凌厉开发 Ext详解与实践 书本代码 包含书本中的代码。欢迎下载
Javascript凌厉开发 Ext详解与实践 书本代码 新闻发布系统源码
Javascript凌厉开发 Ext详解与实践,此书的勘误,缺少的代码
JavaScript凌厉开发 Ext详解与实践-源码清单
JavaScript 凌厉开发 Ext详解与实践-案例工程
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part1 因为源代码比较大,压缩后76M左右 所以分为四个包上传
JavaScript 凌厉开发 Ext详解与实践-新闻发布系统源码
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part4 因为源代码比较大,压缩后76M左右 所以分为四个包上传
JavaScript凌厉开发——Ext详解与实践 源码 源代码 part2 因为源代码比较大,压缩后76M左右 所以分为四个包上传
JavaScript凌厉开发(Ext_JS_3详解与实践),详细讲解EXT的,实例与实践结合。丰富易懂!
《Ext详解与实践》一书缺少的代码:源码6-4-1到6-4-10
此书是《Ext详解与实践》第二版,问世(09年初)以来受到读者的欢迎,并于较短时间内进行了重印,满足了Ext初学者的需求。