extjs render 用法介绍


Posted in Javascript onSeptember 11, 2013
var cm = new Ext.grid.ColumnModel( 
[ 
new Ext.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> 
<meta http-equiv="Content-Type" c> 
<title>03.grid</title> 
<link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/../resources/css/ext-all.css" /> 
<script type="text/javascript" src="http://www.cnblogs.com/adapter/ext/ext-base.js"></script> 
<script type="text/javascript" src="http://www.cnblogs.com/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='查看详细信息' >"; 
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="../examples.js"></script> 
<div id="grid"></div> 
</body> 
</html>
Javascript 相关文章推荐
Javascript图像处理思路及实现代码
Dec 25 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
使用jquery中height()方法获取各种高度大全
Apr 02 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
基于jQuery实现的幻灯图片切换
Dec 02 Javascript
Vue.js中轻松解决v-for执行出错的三个方案
Jun 09 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
JS实现多物体运动的方法详解
Jan 23 Javascript
获取layer.open弹出层的返回值方法
Aug 20 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
jQuery图片轮播的具体实现
Sep 11 #Javascript
Javascript倒计时页面跳转实例小结
Sep 11 #Javascript
用javascript判断IE版本号简单实用且向后兼容
Sep 11 #Javascript
js open() 与showModalDialog()方法使用介绍
Sep 10 #Javascript
jquery获取子节点和父节点的示例代码
Sep 10 #Javascript
解决Jquery load()加载GB2312页面时出现乱码的两种方案
Sep 10 #Javascript
解决css和js的{}与smarty定界符冲突问题的两种方法
Sep 10 #Javascript
You might like
PHP+DBM的同学录程序(4)
2006/10/09 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
thinkPHP3.1验证码的简单实现方法
2016/04/22 PHP
老生常谈ThinkPHP中的行为扩展和插件(推荐)
2017/05/05 PHP
PHP7扩展开发教程之Hello World实现方法示例
2017/08/03 PHP
PHP中16个高危函数整理
2019/09/19 PHP
jQuery validate 中文API 附validate.js中文api手册
2010/07/31 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
JQuery之focus函数使用介绍
2013/08/20 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
Vuejs 组件——props数据传递的实例代码
2017/03/07 Javascript
详解vue.js 开发环境搭建最简单攻略
2017/06/12 Javascript
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
关于微信小程序登录的那些事
2019/01/08 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
[04:17]DOTA2完美盛典,rOtk、BurNIng携手巴图演唱《倔强》
2017/11/28 DOTA
tornado框架blog模块分析与使用
2013/11/21 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
Python实现注册登录系统
2017/08/08 Python
微信跳一跳python代码实现
2018/01/05 Python
python实现ID3决策树算法
2018/08/29 Python
解决Python print输出不换行没空格的问题
2018/11/14 Python
Python中numpy模块常见用法demo实例小结
2019/03/16 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
tensorflow 变长序列存储实例
2020/01/20 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
python requests库的使用
2021/01/06 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
法国创作个性化T恤衫和其他定制产品平台:Tostadora
2018/04/08 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
大专学生求职信
2014/07/04 职场文书
运动会演讲稿200字
2014/08/25 职场文书
2014年终个人工作总结
2014/11/07 职场文书