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 给表格行或者单元格自定义样式的更多相关文章

  1. ElementUI表格行编辑单元格编辑支持(输入框,选择框)Demo

    嗯,需要做成这个样子,所以网上查了些资料.整理了下.提供几个一个思路.不足之处请小伙伴指出来.  普通版的table可编辑内嵌select选择框,输出框,编辑删除添加等 <!DOCTYPE ht ...

  2. FineUI大版本升级,外置ExtJS库、去AXD化、表格合计行、表格可编辑单元格的增删改、顶部菜单框架

    这是一篇很长的文章,在开始正文之前,请允许我代表目前排名前 20 中唯一的 .Net 开源软件 FineUI 拉下选票: 投票地址: https://code.csdn.net/2013OSSurve ...

  3. Swift - 给表格添加移动单元格功能(拖动行)

    1,下面的样例是给表格UITableView添加单元格移动功能: (1)给表格添加长按功能,长按后表格进入编辑状态  (2)在编辑状态下,可以看到单元格后面出现拖动按钮  (3)鼠标按住拖动按钮,可以 ...

  4. table、tr、td表格的行、单元格等属性说明

    table.tr.td表格的行.单元格等属性说明 <table>标签定义HTML表格.简单的HTML表格由table元素以及一个或多个tr.th或td元素组成. tr元素定义表格行,th元 ...

  5. [Xcode 实际操作]五、使用表格-(7)UITableView单元格间隔背景色

    目录:[Swift]Xcode实际操作 本文将演示如何给表格设置间隔的背景颜色. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先 ...

  6. [Xcode 实际操作]五、使用表格-(8)自定义UITableView单元格Accessory样式(附件图标)

    目录:[Swift]Xcode实际操作 本文将演示如何自定义单元格的附件图标. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首先添 ...

  7. NPOI.dll 用法。单元格,样式,字体,颜色,行高,宽度。读写excel

    NPOI.dll 用法.单元格,样式,字体,颜色,行高,宽度.读写excel 转载:http://yuncode.net/code/c_531e679b3896495 view source prin ...

  8. CxGrid 改变某行或单元格的颜色

    CxGrid 改变某行或单元格的颜色   一个表(T)的结构结构如下. ID Test 1 20012 14443 17885 26456 4568 cxGrid成功连接到该表, 如果要实现单元格特效 ...

  9. JS动态生成表格后 合并单元格

    JS动态生成表格后 合并单元格 最近做项目碰到表格中的单元格合并的问题,需求是这样的,首先发ajax请求 请求回来后的数据 动态生成表格数据,但是生成后如果编号或者(根据其他的内容)有相同时,要合并单 ...

随机推荐

  1. PL/SQL配置oracle客户端,登录远程数据库配置

    本地未安装Oracle数据库,但又想使用PL/SQL连接服务器端的数据库. 1.新建NETWORK文件夹, 在该文件夹下新建ADMIN文件夹, 在该文件夹下新建tnsnames.ora文件(拷贝下面的 ...

  2. HDUOJ-----1085Holding Bin-Laden Captive!

    Holding Bin-Laden Captive! Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Ja ...

  3. HDUOJ---(4708)Rotation Lock Puzzle

    Rotation Lock Puzzle Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Oth ...

  4. PLSQL连接ORACLE配置字符串简介 oracle网络配置 三个配置文件 listener.ora、sqlnet.ora、tnsnames.ora原理解释

    PLSQL连接ORACLE配置字符串简介 oracle网络配置 三个配置文件 listener.ora.sqlnet.ora.tnsnames.ora原理解释 oracle网络配置三个配置文件 lis ...

  5. eclipse容易卡死或者较慢的解决方案

    http://blog.sina.com.cn/s/blog_5c6c4dc90100lg8n.html 问题: Eclipse经常卡住或Building workspace等待,感觉很不爽,很多朋友 ...

  6. js重要函数

    window.setTimeout(code,millisec)   方法用于在指定的毫秒数后调用函数或计算表达式.只执行 code 一次(比如某个界面是上左右的三个frame界面,右边这个界面要调用 ...

  7. Linux GPIO子系统

    一 概述 Linux内核中gpio是最简单,最常用的资源(和 interrupt ,dma,timer一样)驱动程序,应用程序都能够通过相应的接口使用gpio,gpio使用0-MAX_INT之间的整数 ...

  8. Linux下su与su -命令的本质区别

    大部分Linux发行版的默认账户是普通用户,而更改系统文件或者执行某些命令,需要root身份才能进行,这就需要从当前用户切换到root用户.Linux中切换用户的命令是su或su -.前天我在使用us ...

  9. selenium 并发执行测试用例

    转帖: 要想多线程并发的运行WebDriver,必须同时满足2个条件,首先你的测试程序是多线程,其次需要用到Selenium Server(selenium-server-standalone-XXX ...

  10. OAF_OAF增删改-修改的实现(案例)

    2014-06-02 Created By BaoXinjian