提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  其它

当前栏目

extjsrender用法介绍

介绍 用法
2023-06-13 09:15:05 时间
复制代码代码如下:

varcm=newExt.grid.ColumnModel(
[
newExt.grid.RowNumberer({header:"",width:20,align:"center"}),
{header:"",align:"center",dataIndex:"AccountAndRoseID",width:50,sortable:true,hidden:true},
{header:"",align:"center",dataIndex:"UserAccountId",width:50,sortable:true,hidden:true},
{header:"帐号",align:"center",dataIndex:"UserAccountName",width:200,sortable:true},
{header:"角色名",align:"center",dataIndex:"UserRoleName",width:200,sortable:true},
{header:"状态",align:"center",dataIndex:"UserAccountStateId",width:200,sortable:true,hidden:true,renderer:function()}
]

renderer可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子（我目前是这么理解的）
先看下renderer:function()里的参数
复制代码代码如下:

renderer:function(value,cellmeta,record,rowIndex,columnIndex,store){

}

1.value是当前单元格的值
2.cellmeta里保存的是cellId单元格id，id不知道是干啥的，似乎是列号，css是这个单元格的css样式。
3.record是这行的所有数据，你想要什么，record.data["id"]这样就获得了。
4.rowIndex是行号，不是从头往下数的意思，而是计算了分页以后的结果。
5.columnIndex列号太简单了。
6.store，这个厉害，实际上这个是你构造表格时候传递的ds，也就是说表格里所有的数据，你都可以随便调用，唉，太厉害了。

网上找到一篇博文，非常不错，直观明了：
复制代码代码如下:
<html>
<head>
<metahttp-equiv="Content-Type"c>
<title>03.grid</title>
<linkrel="stylesheet"type="text/css"href="http://www.cnblogs.com/../resources/css/ext-all.css"/>
<scripttype="text/javascript"src="http://www.cnblogs.com/adapter/ext/ext-base.js"></script>
<scripttype="text/javascript"src="http://www.cnblogs.com/ext-all.js"></script>
<scripttype="text/javascript">
Ext.onReady(function(){
/*
varcm=newExt.grid.ColumnModel([
{header:"编号",dataIndex:"id"},
{header:"性别",dataIndex:"sex",renderer:function(value){
if(value=="male"){
return"<spanstyle="color:red;font-weight:bold;">红男</span>";
}else{
return"<spanstyle="color:green;font-weight:bold;">绿女</span>";
}
}},
{header:"名称",dataIndex:"name"},
{header:"描述",dataIndex:"descn"}
]);
*/
functionrenderSex(value){
if(value=="male"){
return"<spanstyle="color:red;font-weight:bold;">红男</span><imgsrc="user_male.png"/>";
}else{
return"<spanstyle="color:green;font-weight:bold;">绿女</span><imgsrc="user_female.png"/>";
}
}

functionrenderDescn(value,cellmeta,record,rowIndex,columnIndex,store){
varstr="<inputtype="button"value="查看详细信息">";
returnstr;
}

varcm=newExt.grid.ColumnModel([
{header:"编号",dataIndex:"id"},
{header:"性别",dataIndex:"sex",renderer:renderSex},
{header:"名称",dataIndex:"name"},
{header:"描述",dataIndex:"descn",renderer:renderDescn}
]);

vardata=[
["1","male","name1","descn1"],
["2","female","name2","descn2"],
["3","male","name3","descn3"],
["4","female","name4","descn4"],
["5","male","name5","descn5"]
];

varstore=newExt.data.Store({
proxy:newExt.data.MemoryProxy(data),
reader:newExt.data.ArrayReader({},[
{name:"id"},
{name:"sex"},
{name:"name"},
{name:"descn"}
])
});
store.load();

vargrid=newExt.grid.GridPanel({
autoHeight:true,
renderTo:"grid",
store:store,
cm:cm
});

});
</script>
</head>
<body>
<scripttype="text/javascript"src="../examples.js"></script>
<divid="grid"></div>
</body>
</html>

相关文章