一:修改头样式
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 滚动条位置不变,适用于实时数据的刷新
var grid = new Ext.grid.GridPanel({ bbar: new Ext.PM3PagingToolbar({ store : store, displayInfo : true, displayMsg: '显示 {0} - {1} 行 总数 {2} 行', emptyMsg : '没有数据显示' }) }); store...
对于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获取某一单元格的值
// 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? ...
NULL 博文链接:https://topbox163.iteye.com/blog/1276463
使用ext.net代码动态创建gridpanel后任意显示在各种窗口中
详细介绍GridPanel各项属性,ExtJS 普通表格:Ext.grid.GridPanel属性详解
8.3.2 在CRUD操作中restful的设置以及使用Ext.Direct的问题 247 8.4 ListView控件 248 8.5 本章小结 251 第四部分 Ext 扩展和Ext插件 第9章 Ext 扩展 254 9.1 利用Ext.extend实现继承 254 9.2 与Ext扩展相关的预备...