一:修改头样式
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的行高,字体背景色等属性啦。
分享到:
相关推荐
它提供了丰富的功能,如分页、排序、筛选等,并且可以通过配置实现自定义样式和交互行为。对于实时数据的展示,保持滚动条位置不变是一个关键需求。 #### 实现滚动条位置不变的方法 为了实现在数据刷新时滚动条...
**2.6 Grid Panel (Ext.grid.GridPanel)** - **xtype**: `grid` - **功能描述**:Grid Panel 是一个用于展示表格数据的组件。 - **主要用途**:展示结构化数据,支持排序、过滤等功能。 **2.7 Paging Toolbar (Ext...
- 首先,我们需要创建一个继承自EXTJS的`Ext.grid.GridView`的自定义View类。这个类将覆盖默认的渲染逻辑,以便在表格底部插入合计行。 - 在`GridSummary.js`文件中,我们可以定义这个类,并重写`onRender`方法,...
var grid = new Ext.grid.GridPanel({ bbar: new Ext.PM3PagingToolbar({ store : store, displayInfo : true, displayMsg: '显示 {0} - {1} 行 总数 {2} 行', emptyMsg : '没有数据显示' }) }); store...
这个"extjs动态表头"的资源很可能是一个插件或组件,名为`Ext.ux.grid.DynamicGridPanel.js`,它扩展了ExtJS的标准GridPanel,增加了动态调整列的能力。 动态表头的核心功能包括: 1. **实时编辑**:用户可以在...
要实现全选和去全选,我们需要自定义一些方法并绑定到相应的事件上。 首先,我们需要创建一个带有多选功能的下拉列表。这可以通过以下配置实现: ```javascript var comboBox = Ext.create('Ext.form.field....
6. **自定义样式**: 如果扩展还包括界面样式调整,可能还会在`cgrid.js`中包含CSS类名的定义,或者引用外部CSS文件来改变GridPanel的外观。 7. **实例化和使用`: 创建`MyCustomGrid`实例并在页面中使用。这可能涉及...
在实际开发中,我们经常需要对GridPanel的数据、字体颜色以及CSS样式进行自定义,以满足各种业务需求。本篇文章将深入探讨如何在Ext中修改GridPanel的数据、字体颜色以及应用CSS属性。 首先,修改GridPanel中的数据...
3. **创建Grid**:使用`Ext.grid.GridPanel`组件。 ```javascript // 创建数据存储 var store = new Ext.data.ArrayStore({ fields: ['name', 'email'], data : [['Tom', 'tom@example.com'], ['Jerry', 'jerry@...
### EXTGrid属性方法详解 #### 一、Ext.grid.GridPanel `Ext.grid.GridPanel`是ExtJS 4.0中的一个关键组件,用于创建数据表格。以下为该组件的一些核心属性及其含义: - **store**: 数据存储器,用于存放表格的...
**EXT基本表格(GridPanel)介绍**:EXT的表格组件,即`Ext.grid.GridPanel`,是一种功能强大的数据展示工具。它可以与服务器端进行数据交互,支持排序、筛选、分页等功能。开发者可以自定义列头、行样式,甚至实现...
在本文中,我们将深入探讨ExtJS4中的GridPanel样式及其选择模式。GridPanel是ExtJS框架中用于展示数据的一种重要组件,它允许用户以表格形式查看、操作和管理大量信息。 首先,我们来看一个简单的GridPanel示例。在...
// 在grid配置中设置stripeRows为true { xtype: 'grid', stripeRows: true, // 其他配置... } ``` **效果展示**:默认情况下,偶数行背景色较浅,奇数行背景色较深。 #### 自定义行的背景颜色 如果你希望使用...
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扩展相关的预备...
- **GridPanel**: `Ext.grid.GridPanel`,表格组件。 - **PagingToolbar**: `Ext.PagingToolbar`,分页工具栏。 - **Panel**: `Ext.Panel`,面板组件。 - **ProgressBar**: `Ext.ProgressBar`,进度条组件。 - ...
在IT领域,特别是Web开发中,ExtJS是一个广泛使用的JavaScript框架,它提供了丰富的用户界面组件,包括表格(Grid)等。动态表头是ExtJS中一个高级特性,它允许开发者根据需要在运行时动态地创建和修改表格的列结构...
"GridHeaderFilters"插件就是这样一个工具,它允许用户直接在列头中设置筛选条件,提高了数据操作的便利性。 这篇博客“ExtJS4.0 分享GridHeaderFilters插件”可能详细介绍了如何集成并使用这个插件。虽然具体内容...
- 自定义事件处理和样式设置是提高用户体验的关键。 通过理解 `GridComboBox` 的原理和配置,我们可以创建出适应各种需求的下拉菜单,让数据选择变得更加直观和高效。在EXTJS4中,这个控件是实现复杂下拉选择功能...
var grid = new Ext.grid.GridPanel({ store: store, columns: [ // Column配置 // ... ] }); var myPanel = new Ext.Panel({ title: '我的面板', width: 300, height: 200, items: grid, // 将GridPanel...
**Ext.grid.GridPanel** - **描述**: 表格组件,用于显示和编辑数据。 - **用途**: 数据列表、报表等需要展示大量数据的场景。 **Ext.grid.EditorGridPanel** - **描述**: 可编辑的表格组件,允许用户直接在表格中...