`
crabdave
  • 浏览: 1294768 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJS GroupHeaderPlugin的使用 示例

EXTC#CC++CSS 
阅读更多

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 || '&#160;',
     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;
}

分享到：
| Ext.ux.RadioGroup的使用（让各radio使用 ...
评论
6 楼 553718707 2012-06-26  
这个插件好用是好用，我用了28列都表格都没有问题。但是要是加入LockingGridView视图时就会有问题啦。请问有解决方法吗？我的邮箱是553718707@qq.com。
5 楼 zuyali 2011-10-25  
不好意思，我搞错了 ，上条留言请忽略
4 楼 zuyali 2011-10-25  
你好，我已经按照你说的做了，却报了一个错
column.renderer is not a function
return column.renderer(value, ..., record, rowIndex, colIndex,store);
rowspan.js (第 23 行)
望指教
3 楼 ww20042005 2010-04-16  
如果列多了，列宽是不是会变小，这样是不是列的标题会看不见。你知道如何处理吗？
2 楼 379548695 2009-03-12  
jfxia 写道

有些bug，grid的列若是多了，显示会错位。

区官方下载最新的1.3没错位的问题。
1 楼 jfxia 2009-03-10  
有些bug，grid的列若是多了，显示会错位。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    ExtJS静态使用示例

    以下是对标题"ExtJS静态使用示例"和描述中涉及知识点的详细解释： 1. **ExtJS库**：ExtJS是Sencha公司开发的一个前端框架，它基于MVC（Model-View-Controller）设计模式，提供了丰富的UI组件和强大的数据管理能力。...

    extJS myeclipse源码示例

    extJS myeclipse源码示例

    extjs6.6项目示例

    在这个"extjs6.6项目示例"中，我们可以深入理解ExtJS的用法，并学习如何构建基于此框架的应用程序。 首先，"原生态extjs框架的web项目"指的是使用纯ExtJS库构建的项目，没有依赖其他额外的前端框架或库。这种项目...

    extJs4.2MVC示例

    严格按照MVC架构分的曾，可以运行的extJs4.2MVC示例，在myclipse加到一个项目里的的webroot文件夹下，运行index.html即可

    extjs4官方示例以及api文档html版

    虽然EXTJS4的示例可以在本地运行，但考虑到跨域问题和性能优化，建议使用轻量级的HTTP服务器，如Nginx。Nginx是一个高性能的Web服务器和反向代理，配置简单且支持静态文件快速响应，对于前端开发非常友好。安装Nginx...

    extjs 2.0简单示例

    extjs 2.0简单示例，不全，基本上可以知道是什么东西。

    Extjs6示例中文版

    ### Extjs6示例中文版知识点详解 #### 1. ExtJS6简介及学习动机 ExtJS6是一款功能强大的客户端JavaScript框架，适用于构建复杂的企业级Web应用程序。由于中文学习资源较少，作者决定翻译一本名为《ExtJS6 By ...

    extjs mvc简单示例

    这个简单的示例展示了如何在ExtJS中使用MVC模式创建一个基本的数据展示应用。在实际项目中，你可以根据需求扩展模型、视图、控制器以及应用配置，构建更复杂的交互和功能。记住，MVC模式的主要优点在于提高了代码的...

    ExtJS文件上传示例

    在这个"ExtJS文件上传示例"中，我们将探讨如何利用ExtJS实现文件上传功能。 在Web应用中，文件上传是常见的需求，例如用户可能需要上传图片、文档或其他类型的文件。ExtJS 提供了内置的组件和API来处理这种场景。...

    ASP.NET MVC5 +ExtJS6 表格示例

    前端使用ExtJS6的Grid组件展示这些数据，创建一个动态、可交互的表格。用户可以通过这个表格进行筛选、排序，甚至编辑数据，而这些操作会通过Ajax请求反馈到服务器。 在这个学习示例中，可能包含以下关键知识点： ...

    spket1.6.12+extjs5简单示例

    以下是一个简单的 ExtJS 5 应用示例，展示了如何使用自动生成的 model 和 store： ```javascript Ext.application({ name: 'MyApp', launch: function () { var store = Ext.create('MyApp.store.MyStore', {data...

    ExtJs4登录示例

    这个"ExtJs4登录示例"是一个典型的基于ExtJs4开发的用户登录界面的实例，它展示了如何使用ExtJs4的各种组件和功能来实现一个交互式的登录系统。 在ExtJs4中，登录示例可能包括以下几个关键组成部分： 1. **窗口...

    EXTJS+SSH示例

    个人SSH框架学习示例，附近为个人搭建的示例SSH+EXTJS框架

    extjs4.0 MVC 示例代码

    下面将详细探讨EXTJS 4.0中的MVC概念以及在示例代码中可能涉及的关键知识点。 **1. MVC模式概述** MVC模式是一种软件设计模式，用于将业务逻辑、用户界面和数据存储分离。在EXTJS 4.0中，模型（Model）负责管理数据...

    ExtJs使用示例代码之窗口组件和异步请求

    ExtJs使用示例代码之窗口组件和异步请求

    ExtJS MVC示例

    总结来说，`account_manager`示例展示了如何使用ExtJS 4.2.0的MVC模式来构建一个账户管理系统，包括数据模型、数据存储、用户界面和逻辑控制。通过这种结构，开发者可以高效地组织代码，提高项目的可维护性和可扩展...

    EXTJS 折线 chart action 代码示例

    这个示例展示了如何使用EXTJS创建一个与Java后端交互的折线chart，动态加载数据并显示。你可以根据实际需求调整chart的样式和交互效果，如添加工具提示、轴配置、图例等。 通过理解EXTJS的store、proxy、model和...

    extjs3.0开发包含示例api

    示例代码是学习EXTJS 3.0的重要途径，通过查看和分析示例，开发者可以快速掌握各种组件的使用方法和功能。示例通常包括以下内容： 1. **基础组件示例**：如创建基本的按钮、文本框、下拉列表等。 2. **高级组件...

    EXTJS 上传组件及示例

    本篇文章将详细解析EXTJS中的上传组件及其示例，帮助开发者更好地理解和使用这一功能。 EXTJS 的上传组件通常通过`Ext.form.field.File`（也称为FileField或UploadField）实现。这个组件提供了一个表单字段，用户...

    extjs_ux_GroupHeaderGrid_GroupHeaderPlugin_-1.4

    GroupHeaderPlugin.html 文件可能包含了一个示例或者演示如何在HTML页面中引入和使用这个插件。在HTML中，你需要引用ExtJS库、样式文件和插件文件，并且配置Grid面板的实例，启用GroupHeaderPlugin。通常，你会在...

Magicbox
Global site tag (gtag.js) - Google Analytics