ExtJS4.1.1 设置表格背景颜色 修改文本颜色 在表格中插入图片
由于ExtJS版本不断更新,各种渲染方式也随之有所改变,目前大部分书籍还是停留在3版本,对于ExtJS4.1.1版本的表格渲染,设置表格行背景颜色的方式如下:
首先,定义行的样式:
1 .yellow-row .x-grid-cell{ 2 background-color:#FFFF00 !important; 3 } 4 .white-row .x-grid-cell{ 5 background-color:#FFFFFF !important; 6 } 7 .blue-row .x-grid-cell{ 8 background-color:#00AAFF !important; 9 }
该样式定义应在引入js文件之前。
然后,在js文件中引用样式。下面文件中第12~28行是对样式的引用:
1 var gridPanel = new Ext.grid.Panel({ 2 title : '联系人', 3 store : Ext.data.StoreManager.lookup('simpsonsStore'), 12 viewConfig : { 13 getRowClass: function(record, rowIndex, rowParams, store){ 14 var cls; 15 switch(rowIndex % 2){ 16 case 1: 17 cls = 'white-row'; 18 break; 19 case 0: 20 cls = 'yellow-row'; 21 break; 22 } 23 if(record.get('name') == '张毛毛'){ 24 cls = 'blue-row'; 25 } 26 return cls; 27 } 28 }, 29 columns : [{ 30 text : '姓名', 31 dataIndex : 'name', 32 sortable : true, //不可排序 33 hideable: false //不可隐藏 34 //flex: 1 //尽量拉伸 35 }, { 36 text : '电话', 37 dataIndex : 'phonenumber' 38 //renderer : renderCol 39 //flex : 1 40 //hidden: true 41 },{ 42 text: '性别', 43 dataIndex: 'sex', 44 renderer: function(value){ 45 if(value == '男'){ 46 return "<span style='color:blue;'>男</span><img src='../imgs/man.png' width='15'/>"; 47 }else{ 48 return "<span style='color:red;'>女</span><img src='../imgs/woman.png' width='15'/>"; 49 } 50 } 51 },{ 52 text: '出生日期', 53 dataIndex: 'birthday', 54 type: 'date', 55 renderer: Ext.util.Format.dateRenderer('Y年m月d日') 56 }], 57 height : 200, 58 width : 400, 59 renderTo : document.getElementById('grid'), 60 listeners: { 61 click: { 62 element: 'el', //bind to the underlying el property on the panel 63 fn: function(){ 64 var selections = gridPanel.getSelectionModel().getSelection(); 65 Ext.MessageBox.alert('aaaa',selections[0].get('name')); 66 } 67 } 68 } 69 });
上面文件中,第44~50行是给表格添加图片以及修改文本颜色。
上面对背景颜色的设置只是针对行的设置,下面是对列进行背景渲染的函数,在上面js代码中的38行中调用。
1 function renderCol(value, metaData, record, rowIndex, columnIndex, store, view ){ 2 metaData.style = "background-color: #F5C0C0"; 3 return value; 4 }
转载于:https://www.cnblogs.com/lihuiyy/archive/2012/09/26/2704329.html
ExtJS4.1.1 设置表格背景颜色 修改文本颜色 在表格中插入图片相关推荐
- 使用Itext操作PDF,修改文本内容及指定位置插入图片
参考博客:修改文本的 参考博客:插入图片的 这里基于修改文本的博客编写的,主要解决了几个问题: 1.文件乱码 2.设置区域背景色 3.设置文字字体颜色 4.插入图片空指针 5.指定位置插入偏移 等等问 ...
- android切换字体颜色,Android开发实现按钮点击切换背景并修改文字颜色的方法
本文实例讲述了Android开发实现按钮点击切换背景并修改文字颜色的方法.分享给大家供大家参考,具体如下: 其实原理很简单,用到的是selector,用来设置android:background和an ...
- word文档表格中插入图片设置
word文档的表格中插入图片有时会出现半截现象. 1.设置段落,足够的高度,比如原先25磅,可以改为50磅: 2.插入图片后,用回车调整图片位置.
- PDF编辑器哪个好,如何在PDF中插入图片背景
由于PDF文档不像Word那么容易编辑,并且具有较强的保密性,所以PDF文档的编辑需要借助其他第三方的PDF编辑器才能对PDF文件进行编辑,下面,我就教大家如何利用PDF编辑器在PDF中插入图片背景, ...
- Unity 在word中插入图片 并向word表格中写入数据
首先是借鉴的这位大佬的博客:C#操作Word,写数据,插入图片 - Sealee - 博客园 要将Aspose.Words.dll文件放在unity工程中的Plugins文件夹下,并在工程中引入 在w ...
- excel poi 加背景图_java 在Excel中插入图片 POI实现
一.POI简介 Jakarta POI 是apache的子项目,目标是处理ole2对象.它提供了一组操纵Windows文档的Java API 目前比较成熟的是HSSF接口,处理MS Excel(97- ...
- 【Python】通过xlsxwriter向excel表格中插入图片、本地超链接
通过python向excel表格中插入图片,且设置图片的本地超链接. 代码亲测可行,python版本为3.6.3 import xlsxwriter# 创建一个新Excel文件并添加一个工作表. wo ...
- 怎样在word2007中插入图片和表格
怎样在word2007中插入图片和表格 | 浏览: 284 | 更新: 2012-12-06 17:40 | 标签: word2007 1 有用+1 已投票 0 收藏+1 已收藏 全文阅读 分步阅读 ...
- Spire.Doc在Word中插入图片时,自适应宽度设置
需求:往Word中插入图片,需要铺满可编辑区域的宽度,此时需要根据文档的宽度自适应图片的大小了,核心代码如下: Paragraph paragraph = doc.createParagraph(); ...
最新文章
- idea中项目失去svn控制
- 赛门铁克卸载工具_神奇的安卓恶意软件 xHelper:自卸载且无法删除
- container_of 和 offsetof 宏详解
- 我对架构设计的5点思考:网关、业务逻辑、数据访问
- 史密斯预估器matlab仿真,(毕业论文)史密斯预估器设计.doc
- 子程序与中断程序的异同_西门子200samrt高速计数器指令向导及程序
- python 生成nc文件_Python生成器处理大文本文件的代码
- 制作U盘安装UBUNTU
- 量化投资--技术篇(4) 投资组合策略
- 【Codeforces Round #614(div2)】E-Xenon's Attack on the Gangs(树形dp)
- Verilog学习笔记HDLBits——Shift Registers
- Linux进程内存分析pmap命令
- 2017年清华大学计算机科学与技术系考研小结
- 项目三 奖学金名单
- 六顶思考帽(edward de bono)
- 使用 mailto URI 发送邮件
- 中国单反数码相机市场现状动态及前景规模调查报告2022-2028年版
- 2019.1.12日 PYTHON多线程爬虫笔记
- 其他信息: 未找到源,不过,未能搜索部分或所有事件日志。 若要创建源,您需要用于读取所有事件日志的权限以确保新的源名称是唯一的。 不可访问的日志: Security。...
- 大数据技术应用 第1章Oracle11g简介