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 相关文章推荐
表单提交验证类
Jul 14 Javascript
JavaScript国旗变换效果代码
Aug 13 Javascript
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
利用js(jquery)操作Cookie的方法说明
Dec 19 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
深入理解js中this的用法
May 28 Javascript
概述一个页面从输入URL到页面加载完的过程
Dec 16 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
Vue表单类的父子组件数据传递示例
May 03 Javascript
ES6知识点整理之Proxy的应用实例详解
Apr 16 Javascript
vue3.0实现插件封装
Dec 14 Vue.js
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中Date()时间日期函数的使用方法小结
2011/04/20 PHP
php数组中删除元素的实现代码
2012/06/22 PHP
PHP更新购物车数量(表单部分/PHP处理部分)
2013/05/03 PHP
php实现头像上传预览功能
2017/04/27 PHP
Laravel中unique和exists验证规则的优化详解
2018/01/28 PHP
javascript开发技术大全 第4章 直接量与字符集
2011/07/03 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
JS解析url查询参数的简单代码
2017/08/06 Javascript
前端跨域的几种解决方式总结(推荐)
2017/08/16 Javascript
Node.js+jade抓取博客所有文章生成静态html文件的实例
2017/09/19 Javascript
Angular刷新当前页面的实现方法
2018/11/21 Javascript
基于vue.js实现分页查询功能
2018/12/29 Javascript
详解vue挂载到dom上会发生什么
2019/01/20 Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
2020/10/29 Javascript
Python运用于数据分析的简单教程
2015/03/27 Python
教你学会使用Python正则表达式
2017/09/07 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
libreoffice python 操作word及excel文档的方法
2019/07/04 Python
Python爬虫 scrapy框架爬取某招聘网存入mongodb解析
2019/07/31 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
Python timeit模块原理及使用方法
2020/10/10 Python
Jupyter notebook命令和编辑模式常用快捷键汇总
2020/11/17 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
CSS教程:CSS3圆角属性
2009/04/02 HTML / CSS
锐步美国官方网站:Reebok美国
2018/01/10 全球购物
Camille Jewelry官网:现代女性时尚首饰
2019/07/07 全球购物
副总经理任命书
2014/06/05 职场文书
应聘护士求职信
2014/07/21 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
运动会广播稿50字
2015/08/19 职场文书
HR在给员工开具离职证明时,需要注意哪些问题?
2019/07/03 职场文书
如何用PHP实现分布算法之一致性哈希算法
2021/05/26 PHP
Windows 11上手初体验:任务栏和开始菜单等迎来大改
2021/11/21 数码科技
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android