ExtJs GridPanel 给表格行或者单元格自定义样式
Ext.onReady(function(){
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
}); Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: Ext.getBody(),
viewConfig: {
//这里可以根据我们自己的逻辑给表格添加样式
getRowClass: function(record, rowIndex, rowParams, store){
return "tasks-completed-task";
}
},
});
});
//给行添加样式
.tasks-completed-task {
color:#fb223a;
}
//行内单元格添加样式
.tasks-completed-task .x-grid-cell {
text-decoration: line-through;
color: gray;
}
.tasks-completed-task .x-grid-cell(这种写法是CSS 样式 子元素选择器)
意思是 父容器的CSS = tasks-completed-task 子元素的css = x-grid-cell 才会生效
ExtJs GridPanel 给表格行或者单元格自定义样式的更多相关文章
- ElementUI表格行编辑单元格编辑支持(输入框,选择框)Demo
嗯,需要做成这个样子,所以网上查了些资料.整理了下.提供几个一个思路.不足之处请小伙伴指出来. 普通版的table可编辑内嵌select选择框,输出框,编辑删除添加等 <!DOCTYPE ht ...
- FineUI大版本升级,外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架
这是一篇很长的文章,在开始正文之前,请允许我代表目前排名前 20 中唯一的 .Net 开源软件 FineUI 拉下选票: 投票地址: https://code.csdn.net/2013OSSurve ...
- Swift - 给表格添加移动单元格功能(拖动行)
1,下面的样例是给表格UITableView添加单元格移动功能: (1)给表格添加长按功能,长按后表格进入编辑状态 (2)在编辑状态下,可以看到单元格后面出现拖动按钮 (3)鼠标按住拖动按钮,可以 ...
- table、tr、td表格的行、单元格等属性说明
table.tr.td表格的行.单元格等属性说明 <table>标签定义HTML表格.简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...
- [Xcode 实际操作]五、使用表格-(7)UITableView单元格间隔背景色
目录:[Swift]Xcode实际操作 本文将演示如何给表格设置间隔的背景颜色. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先 ...
- [Xcode 实际操作]五、使用表格-(8)自定义UITableView单元格Accessory样式(附件图标)
目录:[Swift]Xcode实际操作 本文将演示如何自定义单元格的附件图标. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添 ...
- NPOI.dll 用法。单元格,样式,字体,颜色,行高,宽度。读写excel
NPOI.dll 用法.单元格,样式,字体,颜色,行高,宽度.读写excel 转载:http://yuncode.net/code/c_531e679b3896495 view source prin ...
- CxGrid 改变某行或单元格的颜色
CxGrid 改变某行或单元格的颜色 一个表(T)的结构结构如下. ID Test 1 20012 14443 17885 26456 4568 cxGrid成功连接到该表, 如果要实现单元格特效 ...
- JS动态生成表格后 合并单元格
JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...
随机推荐
- PL/SQL配置oracle客户端,登录远程数据库配置
本地未安装Oracle数据库,但又想使用PL/SQL连接服务器端的数据库. 1.新建NETWORK文件夹, 在该文件夹下新建ADMIN文件夹, 在该文件夹下新建tnsnames.ora文件(拷贝下面的 ...
- HDUOJ-----1085Holding Bin-Laden Captive!
Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Ja ...
- HDUOJ---(4708)Rotation Lock Puzzle
Rotation Lock Puzzle Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Oth ...
- PLSQL连接ORACLE配置字符串简介 oracle网络配置 三个配置文件 listener.ora、sqlnet.ora、tnsnames.ora原理解释
PLSQL连接ORACLE配置字符串简介 oracle网络配置 三个配置文件 listener.ora.sqlnet.ora.tnsnames.ora原理解释 oracle网络配置三个配置文件 lis ...
- eclipse容易卡死或者较慢的解决方案
http://blog.sina.com.cn/s/blog_5c6c4dc90100lg8n.html 问题: Eclipse经常卡住或Building workspace等待,感觉很不爽,很多朋友 ...
- js重要函数
window.setTimeout(code,millisec) 方法用于在指定的毫秒数后调用函数或计算表达式.只执行 code 一次(比如某个界面是上左右的三个frame界面,右边这个界面要调用 ...
- Linux GPIO子系统
一 概述 Linux内核中gpio是最简单,最常用的资源(和 interrupt ,dma,timer一样)驱动程序,应用程序都能够通过相应的接口使用gpio,gpio使用0-MAX_INT之间的整数 ...
- Linux下su与su -命令的本质区别
大部分Linux发行版的默认账户是普通用户,而更改系统文件或者执行某些命令,需要root身份才能进行,这就需要从当前用户切换到root用户.Linux中切换用户的命令是su或su -.前天我在使用us ...
- selenium 并发执行测试用例
转帖: 要想多线程并发的运行WebDriver,必须同时满足2个条件,首先你的测试程序是多线程,其次需要用到Selenium Server(selenium-server-standalone-XXX ...
- OAF_OAF增删改-修改的实现(案例)
2014-06-02 Created By BaoXinjian