- 浏览: 582228 次
- 性别:
- 来自: 杭州
文章分类
- 全部博客 (268)
- ext基础 (72)
- Java基础 (68)
- jquery (14)
- oracle (21)
- sqlserver (7)
- linux (2)
- webserver (1)
- C/C++ (1)
- sql (9)
- IDE (2)
- java 智能卡 (1)
- mysql (6)
- ibatis (2)
- struts2 (3)
- cvs (1)
- 服务器 (1)
- html (11)
- freemarker (4)
- liferay (2)
- jMS (1)
- iphone (1)
- c# (1)
- Android (11)
- wince (6)
- javascript (4)
- ps (1)
- hibernate (1)
- 其他 (3)
最新评论
-
ilyq:
请问,px.gif 在哪里
斜线表头 -
jisang:
没看懂,第一个org.js和最后的js什么关系,可否发我一份完 ...
用ExtJS 实现动态载入树(Load tree) -
JavaStudyEye:
我去,能否搞个正确点的,,,
<#list ...
freemarker 遍历map 对象 -
PangSir:
大爱,简直是大爱!!困扰这么久以来的问题,虽然知道是CSS的问 ...
ExtJs checkbox radiobox 问题 汇总 -
skynet_java:
有demo嘛!邮箱:think_world@foxmail.c ...
消息推送服务需求 - 服务器开发、客户端开发
extjs groupheaderplugin的使用
创建调用的HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http: //www.w3.org/1999/xhtml" xml: lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="GroupHeaderPlugin.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="GroupHeaderPlugin.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
Ext.onReady(function() {
new Ext.Viewport({
layout: 'fit',
items: [{
xtype: 'grid',
title: 'GroupHeaderPlugin Example',
store: new Ext.data.SimpleStore({
fields: ['id', 'nr1', 'text1', 'info1', 'special1', 'nr2', 'text2', 'info2', 'special2', 'special3', 'changed'],
data: [
['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
]
}),
colModel: new Ext.grid.ColumnModel({
columns: [
{header: 'Id', width: 25, dataIndex: 'id'},
{header: 'Nr', width: 25, dataIndex: 'nr1'},
{header: 'Text', width: 50, dataIndex: 'text1'},
{header: 'Info', width: 50, dataIndex: 'info1'},
{header: 'Special', width: 60, dataIndex: 'special1'},
{header: 'Nr', width: 25, dataIndex: 'nr2'},
{header: 'Text', width: 50, dataIndex: 'text2'},
{header: 'Info', width: 50, dataIndex: 'info2'},
{header: 'Special', width: 60, dataIndex: 'special2'},
{header: 'Special', width: 60, dataIndex: 'special3'},
{header: 'Changed', width: 50, dataIndex: 'changed'}
],
defaultSortable: true,
rows: [
[
{rowspan: 2},
{header: 'Before', colspan: 4, align: 'center'},
{header: 'After', colspan: 4, align: 'center'},
{header: 'Sum', colspan: 2, align: 'center', rowspan: 2}
], [
{},
{header: 'Merchandise', colspan: 3, align: 'center'},
{},
{header: 'Merchandise', colspan: 3, align: 'center'}
]
]
}),
enableColumnMove: false,
viewConfig: {
forceFit: true
},
plugins: [new Ext.ux.plugins.GroupHeaderGrid()]
}]
});
});
</script>
</head>
<body>
</body>
</html>
GroupHeaderPlugin.js文件源码:
Ext.namespace("Ext.ux.plugins");
Ext.ux.plugins.GroupHeaderGrid = function(config) {
Ext.apply(this, config);
};
Ext.extend(Ext.ux.plugins.GroupHeaderGrid, Ext.util.Observable, {
init: function(grid) {
var v = grid.getView();
v.beforeMethod('initTemplates', this.initTemplates);
v.renderHeaders = this.renderHeaders.createDelegate(v, [v.renderHeaders]);
v.afterMethod('onColumnWidthUpdated', this.updateGroupStyles);
v.afterMethod('onAllColumnWidthsUpdated', this.updateGroupStyles);
v.afterMethod('onColumnHiddenUpdated', this.updateGroupStyles);
v.getHeaderCell = this.getHeaderCell;
v.updateSortIcon = this.updateSortIcon;
v.getGroupStyle = this.getGroupStyle;
},
initTemplates: function() {
var ts = this.templates || {};
if (!ts.gheader) {
ts.gheader = new Ext.Template(
'<table border="0" cellspacing="0" cellpadding="0" class="ux-grid-group-table" style="{tstyle}">',
'<thead>{rows}{header}</thead>',
'</table>'
);
}
if (!ts.header) {
ts.header = new Ext.Template(
'<tr class="x-grid3-hd-row">{cells}</tr>'
);
}
if (!ts.gcell) {
ts.gcell = new Ext.Template(
'<td class="x-grid3-hd {cls} x-grid3-td-{id}" style="{style}" rowspan="{rowspan}" colspan="{colspan}">',
'<div {tooltip} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">{value}</div>',
'</td>'
);
}
this.templates = ts;
},
renderHeaders: function(renderHeaders) {
var ts = this.templates, rows = [], table = [];
for (var i = 0; i < this.cm.rows.length; i++) {
var r = this.cm.rows[i], cells = [], col = 0;
for (var j = 0; j < r.length; j++) {
var c = r[j];
c.colspan = c.colspan || 1;
c.rowspan = c.rowspan || 1;
while (table[i] && table[i][col]) {
col++;
}
c.col = col;
for (var rs = i; rs < i + c.rowspan; rs++) {
if (!table[rs]) {
table[rs] = [];
}
for (var cs = col; cs < col + c.colspan; cs++) {
table[rs][cs] = true;
}
}
var gs = this.getGroupStyle(c);
cells[j] = ts.gcell.apply({
id: c.id || i + '-' + col,
cls: c.header ? 'ux-grid-hd-group-cell' : 'ux-grid-hd-nogroup-cell',
style: 'width:' + gs.width + ';' + (gs.hidden ? 'display:none;' : '') + (c.align ? 'text-align:' + c.align + ';' : ''),
rowspan: c.rowspan,
colspan: gs.colspan,
tooltip: c.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') + '="' + c.tooltip + '"' : '',
value: c.header || ' ',
istyle: c.align == 'right' ? 'padding-right:16px' : ''
});
}
rows[i] = ts.header.apply({
cells: cells.join('')
});
}
return ts.gheader.apply({
tstyle: 'width:' + this.getTotalWidth() + ';',
rows: rows.join(''),
header: renderHeaders.call(this)
});
},
getGroupStyle: function(c) {
var w = 0, h = true, cs = 0;
for (var i = c.col; i < c.col + c.colspan; i++) {
if (!this.cm.isHidden(i)) {
var cw = this.cm.getColumnWidth(i);
if(typeof cw == 'number'){
w += cw;
}
h = false;
cs++;
}
}
return {
width: (Ext.isBorderBox ? w : Math.max(w - this.borderWidth, 0)) + 'px',
hidden: h,
colspan: cs || 1
}
},
updateGroupStyles: function(col) {
var rows = this.mainHd.query('tr.x-grid3-hd-row');
for (var i = 0; i < rows.length - 1; i++) {
var cells = rows[i].childNodes;
for (var j = 0; j < cells.length; j++) {
var c = this.cm.rows[i][j];
if ((typeof col != 'number') || (col >= c.col && col < c.col + c.colspan)) {
var gs = this.getGroupStyle(c);
cells[j].style.width = gs.width;
cells[j].style.display = gs.hidden ? 'none' : '';
cells[j].colSpan = gs.colspan;
}
}
}
},
getHeaderCell : function(index){
return this.mainHd.query('td.x-grid3-cell')[index];
},
updateSortIcon : function(col, dir){
var sc = this.sortClasses;
var hds = this.mainHd.select('td.x-grid3-cell').removeClass(sc);
hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
}
});
css源码:
.x-grid3-header-offset {
width: auto;
}
.ext-ie .x-grid3 table.ux-grid-group-table, .ext-safari .x-grid3 table.ux-grid-group-table {
table-layout: auto;
}
.ux-grid-hd-group-cell {
background: url(../extjs/resources/images/default/grid/grid3-hrow.gif) repeat-x bottom;
创建调用的HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http: //www.w3.org/1999/xhtml" xml: lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="GroupHeaderPlugin.css" />
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="GroupHeaderPlugin.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
Ext.onReady(function() {
new Ext.Viewport({
layout: 'fit',
items: [{
xtype: 'grid',
title: 'GroupHeaderPlugin Example',
store: new Ext.data.SimpleStore({
fields: ['id', 'nr1', 'text1', 'info1', 'special1', 'nr2', 'text2', 'info2', 'special2', 'special3', 'changed'],
data: [
['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
]
}),
colModel: new Ext.grid.ColumnModel({
columns: [
{header: 'Id', width: 25, dataIndex: 'id'},
{header: 'Nr', width: 25, dataIndex: 'nr1'},
{header: 'Text', width: 50, dataIndex: 'text1'},
{header: 'Info', width: 50, dataIndex: 'info1'},
{header: 'Special', width: 60, dataIndex: 'special1'},
{header: 'Nr', width: 25, dataIndex: 'nr2'},
{header: 'Text', width: 50, dataIndex: 'text2'},
{header: 'Info', width: 50, dataIndex: 'info2'},
{header: 'Special', width: 60, dataIndex: 'special2'},
{header: 'Special', width: 60, dataIndex: 'special3'},
{header: 'Changed', width: 50, dataIndex: 'changed'}
],
defaultSortable: true,
rows: [
[
{rowspan: 2},
{header: 'Before', colspan: 4, align: 'center'},
{header: 'After', colspan: 4, align: 'center'},
{header: 'Sum', colspan: 2, align: 'center', rowspan: 2}
], [
{},
{header: 'Merchandise', colspan: 3, align: 'center'},
{},
{header: 'Merchandise', colspan: 3, align: 'center'}
]
]
}),
enableColumnMove: false,
viewConfig: {
forceFit: true
},
plugins: [new Ext.ux.plugins.GroupHeaderGrid()]
}]
});
});
</script>
</head>
<body>
</body>
</html>
GroupHeaderPlugin.js文件源码:
Ext.namespace("Ext.ux.plugins");
Ext.ux.plugins.GroupHeaderGrid = function(config) {
Ext.apply(this, config);
};
Ext.extend(Ext.ux.plugins.GroupHeaderGrid, Ext.util.Observable, {
init: function(grid) {
var v = grid.getView();
v.beforeMethod('initTemplates', this.initTemplates);
v.renderHeaders = this.renderHeaders.createDelegate(v, [v.renderHeaders]);
v.afterMethod('onColumnWidthUpdated', this.updateGroupStyles);
v.afterMethod('onAllColumnWidthsUpdated', this.updateGroupStyles);
v.afterMethod('onColumnHiddenUpdated', this.updateGroupStyles);
v.getHeaderCell = this.getHeaderCell;
v.updateSortIcon = this.updateSortIcon;
v.getGroupStyle = this.getGroupStyle;
},
initTemplates: function() {
var ts = this.templates || {};
if (!ts.gheader) {
ts.gheader = new Ext.Template(
'<table border="0" cellspacing="0" cellpadding="0" class="ux-grid-group-table" style="{tstyle}">',
'<thead>{rows}{header}</thead>',
'</table>'
);
}
if (!ts.header) {
ts.header = new Ext.Template(
'<tr class="x-grid3-hd-row">{cells}</tr>'
);
}
if (!ts.gcell) {
ts.gcell = new Ext.Template(
'<td class="x-grid3-hd {cls} x-grid3-td-{id}" style="{style}" rowspan="{rowspan}" colspan="{colspan}">',
'<div {tooltip} class="x-grid3-hd-inner x-grid3-hd-{id}" unselectable="on" style="{istyle}">{value}</div>',
'</td>'
);
}
this.templates = ts;
},
renderHeaders: function(renderHeaders) {
var ts = this.templates, rows = [], table = [];
for (var i = 0; i < this.cm.rows.length; i++) {
var r = this.cm.rows[i], cells = [], col = 0;
for (var j = 0; j < r.length; j++) {
var c = r[j];
c.colspan = c.colspan || 1;
c.rowspan = c.rowspan || 1;
while (table[i] && table[i][col]) {
col++;
}
c.col = col;
for (var rs = i; rs < i + c.rowspan; rs++) {
if (!table[rs]) {
table[rs] = [];
}
for (var cs = col; cs < col + c.colspan; cs++) {
table[rs][cs] = true;
}
}
var gs = this.getGroupStyle(c);
cells[j] = ts.gcell.apply({
id: c.id || i + '-' + col,
cls: c.header ? 'ux-grid-hd-group-cell' : 'ux-grid-hd-nogroup-cell',
style: 'width:' + gs.width + ';' + (gs.hidden ? 'display:none;' : '') + (c.align ? 'text-align:' + c.align + ';' : ''),
rowspan: c.rowspan,
colspan: gs.colspan,
tooltip: c.tooltip ? (Ext.QuickTips.isEnabled() ? 'ext:qtip' : 'title') + '="' + c.tooltip + '"' : '',
value: c.header || ' ',
istyle: c.align == 'right' ? 'padding-right:16px' : ''
});
}
rows[i] = ts.header.apply({
cells: cells.join('')
});
}
return ts.gheader.apply({
tstyle: 'width:' + this.getTotalWidth() + ';',
rows: rows.join(''),
header: renderHeaders.call(this)
});
},
getGroupStyle: function(c) {
var w = 0, h = true, cs = 0;
for (var i = c.col; i < c.col + c.colspan; i++) {
if (!this.cm.isHidden(i)) {
var cw = this.cm.getColumnWidth(i);
if(typeof cw == 'number'){
w += cw;
}
h = false;
cs++;
}
}
return {
width: (Ext.isBorderBox ? w : Math.max(w - this.borderWidth, 0)) + 'px',
hidden: h,
colspan: cs || 1
}
},
updateGroupStyles: function(col) {
var rows = this.mainHd.query('tr.x-grid3-hd-row');
for (var i = 0; i < rows.length - 1; i++) {
var cells = rows[i].childNodes;
for (var j = 0; j < cells.length; j++) {
var c = this.cm.rows[i][j];
if ((typeof col != 'number') || (col >= c.col && col < c.col + c.colspan)) {
var gs = this.getGroupStyle(c);
cells[j].style.width = gs.width;
cells[j].style.display = gs.hidden ? 'none' : '';
cells[j].colSpan = gs.colspan;
}
}
}
},
getHeaderCell : function(index){
return this.mainHd.query('td.x-grid3-cell')[index];
},
updateSortIcon : function(col, dir){
var sc = this.sortClasses;
var hds = this.mainHd.select('td.x-grid3-cell').removeClass(sc);
hds.item(col).addClass(sc[dir == "DESC" ? 1 : 0]);
}
});
css源码:
.x-grid3-header-offset {
width: auto;
}
.ext-ie .x-grid3 table.ux-grid-group-table, .ext-safari .x-grid3 table.ux-grid-group-table {
table-layout: auto;
}
.ux-grid-hd-group-cell {
background: url(../extjs/resources/images/default/grid/grid3-hrow.gif) repeat-x bottom;
发表评论
-
将博客搬至CSDN
2023-02-06 16:57 109https://www.iteye.com/blog/user ... -
Liferay Portal 应用之开发(1)
2012-02-27 14:09 17321.下载安装Eclipse Eclipse ... -
liferay Portal (1) 应用之配置
2012-02-27 13:59 1230Liferay Portal缺省只有一 ... -
ext form
2011-05-18 15:25 924//grid1定义的grid var record = gr ... -
combox
2011-04-27 10:55 15311.服务器数据作为ComboBox的数据源 实例 首先从服务 ... -
ext grid 单元格
2010-12-29 11:17 959listeners : { cellcli ... -
combox 默认值
2010-12-20 10:35 2950[ {"abbr":&quo ... -
Ext.DateField 格式
2010-12-17 10:11 1393Ext.DatePicker,该类为我们提供了一个占地面积很广 ... -
extjs的grid控件如何根据值来设置某行的背景颜色
2010-12-17 09:40 8030根据不同的值来设置grid的背景颜色 在viewConfig ... -
动态组件
2010-12-16 17:05 966Ext.onReady(function() { ... -
js 获取路径
2010-12-13 19:02 1337<br>以下为输出: <br> ... -
矫正对象 信息登记
2010-12-08 14:10 879矫正对象登记 { frame : true ... -
转 ext Demo
2010-12-05 13:17 1419下面这个是主界面的设计 Ext.onReady(funct ... -
下拉框 控制 列是否可读
2010-11-12 08:33 1050Ext EditorGrid单元格控制小记 http://d ... -
extjs formpanel 怎么显示图片
2010-10-02 10:13 3492//可加普通的panel,html属性直接添加html代码 ... -
动态 改变 column样式
2010-09-30 16:35 1090grid.getView().getCell(rowNum , ... -
js 应用
2010-09-29 14:38 966JS里 面的new Date("xxxx/xx/xx ... -
grid 表头 鼠标事件
2010-09-24 16:04 1845grid.addListener("cellclic ... -
格式化
2010-08-26 00:32 1410//创建edgrid.js Ext.onReady(func ... -
ext (增 ,删,改 ,查,导出excel)
2010-08-26 00:03 1802下面为扩张grid的 代码 ...
相关推荐
用Ext实现报表中的核心问题解决方案, X和Y轴注释, 已经竖着现在Y轴名称
ext3.3制作报表新功能,表格实现报表格式,表头分割,单元格合并,排序等功能强大
Ext生成报表导出到Excel,用Eclipse直接导入进去,发布就可以用,经过测试IE8可以显示,也可以导出
Extjs图形报表实例. 仅供参考学习。
这是一个用于EXT实现复杂表头的插件.资源共享...欢迎下载.
用于ext报表的,报表打印,用于ext的。很好用
Ext3.4.0复杂(多行)表头+锁定多列例子 非常棒,项目中需要使用到的。
EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT中文EXT...
NULL 博文链接:https://lixiaokui11.iteye.com/blog/1056365
asdext extext extext extext extext extext extext extext extext extext extext extext extext extext ext
ext资料 ext资料 ext资料 ext资料 ext资料
一个用ext4.0实现的图形报表,更具界面列表数据,自动生成图形报表,包括柱形图,折线图,饼状图。
ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ext使用ex
ext3.0ext3.0ext3.0ext3.0ext3.0ext3.0
ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记ext2.0笔记...
ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试ext测试
Ext3.3.1Ext3.3.1Ext3.3.1Ext3.3.1Ext3.3.1Ext3.3.1
ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0ext-2.0
分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT分页EXT
ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询ext分页查询...