一:修改头样式 1:直接修改样式 监听gridpanel的'afterrender' 事件 listeners : { 'afterrender' : function(){ var elments = Ext.select(".x-grid3-header");//.x-grid3-hd elments.each(function(el) { el.setStyle("background-color", '#CBBC82');// 设置不同的颜色 el.setStyle("background-image", 'none'); }, this) ; } } 2:修改viewConfig的模板 var viewConfig={ templates:{ // 在模板中引入自己定义的样式。使用这个view的grid的header的样式就修改了。 header:new Ext.Template( ' <table border="0" cellspacing="0" cellpadding="0" style="{tstyle}">', ' <thead> <tr id="my-grid-head">{mergecells} </tr>' + ' <tr id="x-grid3-hd-row">{cells} </tr> </thead>', " </table>" ), mhcell: new Ext.Template( ' <td id="myrow" colspan="{mcols}"> <div align="center"> <b>{value} </b> </div>', " </td>" ) } }; grid.view=new Ext.grid.GridView(viewConfig);
二:修改列样式 1:修改Ext.grid.ColumnModel的css属性值 { header : 'Last Updated', width : 85, align : 'center', css:'height:27px; vertical-align:middle; font-size:12;color:red;', renderer : Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' } 如果需要修改所有行的样式可以使用columnModel的default属性设置css属性值 var cm = new Ext.grid.ColumnModel({ defaults: { css : 'height:27px; vertical-align:middle; font-size:12;background-color :#EDEEF0;background- image:none;' }, columns:[] }) 这样就改变整个grid的行列的样式 2:加载数据时改变列的颜色 首先定义一个样式如下 .x-grid-back-red { background: #FF0000; } 定义改变颜色的列: {header:'摘要',dataIndex:'zhaoyao',align:'left',width:150, renderer : function(v,m){ m.css='x-grid-back-red'; return v; } }
三:修改行样式 1:指定某一行的背景色,鼠标移过行的背景色以及选中行的背景色设置 使用gridView属性的设置这些样式,首先定义好样式 viewConfig : { rowOverCls : 'my-row-over',//鼠标移过的行样式 selectedRowClass : "my-row-selected",//选中行的样式 getRowClass : function(record,rowIndex,rowParams,store){ //指定行的样式 if(rowIndex ==2){ return "my-row"; } } } 2:加载数据完成后调用方法改变行的颜色 首先要解决的一个问题是如果判断数据已经加载完毕,最简单的方法是给grid的store添加onload事件。 如果你想有条件地改变某行的背景颜色,则还需要遍历gird的store,这里有个简单的方法即store的 each方法。 grid.getStore().on('load',function(s,records){ var girdcount=0; s.each(function(r){ if(r.get('zy')=='本期合计'){ grid.getView().getRow(girdcount).style.backgroundColor='#FFFF00'; }else if(r.get('zy')=='本年累计'){ grid.getView().getRow(girdcount).style.backgroundColor='#FF1493'; }else if(r.get('zy')=='期初余额'){ grid.getView().getRow(girdcount).style.backgroundColor='#DCDCDC'; } girdcount=girdcount+1; }); }); 通过这些样式的自定义可以修改grid的行高,字体背景色等属性啦。
相关推荐
Ext.grid.GridPanel属性祥解, 表格部门的详解,通俗易懂,适合初学人员,以及想对GridPanel有个精析认识的Web开发人员
Ext.grid.GridPanel 删除线 放到example文件夹下运行
Ext.grid.ColumnModel显示不正常
右键菜单的资料,代码已经详细描写。请仿照文件中所描述即可使用,不限于EXT4.0以上版本使用。
此文档是可编辑表格Ext.grid.EditorGridPanel的说明以及示例的源代码,放到eclipse里面即可运行,显示出效果!
Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作 Ext GridPanel 中实现加链接操作
找了半天,结果在extjs的老家找到一个前辈写的代码,可以在grid上面加上合计, <br>但是却只能合计grid里面的数据,但是我们平常一般是只显示20行或者30行,这样的合计就没有什么意义,我们的合计数据是单独从...
Ext.grid.GridPanel有一个重大缺陷,就是单元格的内容不能选中,没法选中就没法复制,给用户带来很多不便,下面是从网上搜到的解决方案。
Ext grid panel 滚动条位置不变,适用于实时数据的刷新
对于GridPanel中拖动选中行排序的实现,网上有不少ExtJs实现的例子,但是没有找到使用Ext.net实现的,正好最近有个需求要使用,干脆来写一个。 DEMO功能说明: 1、拖动GridPanel选中行到新位置排序。 2、在拖动结束...
Ext修改GridPanel数据和字体颜色等,不是单指EditGridPanel 首先获取选中的行(当然也可以获取单元格): 代码如下: var selectedRow = grid.getSelectionModel().getSelected(); 修改设置: 代码如下: selectedRow....
将页面的GridPanel中的数据导出到Excel中 测试Ext:版本2.2.1 支持GridSummary,GroupSummary和GroupHeaderPlugin插件 使用方法: 1)把三个JS文件引入到页面中 2)调用例句: var data2Excel = new Ext.icss.Data2...
该例子实现了ext的gridpanel多层表头+分组+小计以及与Java后台交互的全代码。还有自适应浏览器大小的功能包括导出excel,里面有注释,可能注释不全。分别为group.jsp,totals.jsp页面。
EXT GridPanel获取某一单元格的值
var grid = new Ext.grid.GridPanel({ bbar: new Ext.PM3PagingToolbar({ store : store, displayInfo : true, displayMsg: '显示 {0} - {1} 行 总数 {2} 行', emptyMsg : '没有数据显示' }) }); store...
详细介绍GridPanel各项属性,ExtJS 普通表格:Ext.grid.GridPanel属性详解
使用ext.net代码动态创建gridpanel后任意显示在各种窗口中
// not rendered } var g = this.grid; var c = g.getGridEl(); var csize = c.getSize(true); var vw = csize.width; if (!g.hideHeaders && (vw < 20 || csize.height < 20)) { // display: // none? ...
EXTJS.GRIDPANEL中日期格式 设置
表格由类Ext.grid.GridPanel定义,继承自Panel,其xtype为grid。ExtJS中,表格Grid必须包含列定义信息,并指定表格的数据存储器Store。表格的列信息由类Ext.grid.Column(以前是由Ext.grid.ColumnModel定义)、而...