Ext gridPanel 打印

 

Ext 打印 grid 数据 ，唯一不足的是不支持IE。

PrinterFriendly.config.js

/* Ext.ux.PrinterFriendly * (c) 2008 Steffen Hiller (http://www.extjswithrails.com) * * License: Ext.ux.PrinterFriendly is licensed under the terms of * the Open Source LGPL 3.0 license. Commercial use is permitted to the extent * that the code/component(s) do NOT become part of another Open Source or Commercially * licensed development library or toolkit without explicit permission. * * License details: http://www.gnu.org/licenses/lgpl.html * * This is an extension for the Ext JS Library, for more information see http://www.extjs.com. *--------------------------------------------------------------------------*/ // Ext.namespace('Ext.ux.PrinterFriendly'); Ext.ux.PrinterFriendly = function(){}; /* * The path to your ux.PrinterFriendly folder */ Ext.ux.PrinterFriendly.ROOT = '../../source'; /* * Instead of using Ext.ux.PrinterFriendly.onReady and Ext.ux.PrinterFriendly.onPrinting * you can use Ext.onReady and Ext.onPrinting * See Shortcuts.js for all available shortcuts */ Ext.ux.PrinterFriendly.ENABLE_SHORTCUTS = true; 

ext.ux.printerfriendly-debug.js

/* Ext.ux.PrinterFriendly * (c) 2008 Steffen Hiller (http://www.extjswithrails.com) * * License: Ext.ux.PrinterFriendly is licensed under the terms of * the Open Source LGPL 3.0 license. Commercial use is permitted to the extent * that the code/component(s) do NOT become part of another Open Source or Commercially * licensed development library or toolkit without explicit permission. * * License details: http://www.gnu.org/licenses/lgpl.html * * This is an extension for the Ext JS Library, for more information see http://www.extjs.com. *--------------------------------------------------------------------------*/ Ext.ux.PrinterFriendly.getHtml = function() { return Ext.get(document.getElementsByTagName('html')[0]); }; Ext.ux.PrinterFriendly.getQueryString = function() { return window.location.href.split('?')[1]; }; Ext.ux.PrinterFriendly.isPrinting = function() { return (Ext.urlDecode(Ext.ux.PrinterFriendly.getQueryString())._format == "printerfriendly"); }; // Not working as expected yet, hope to fix this for the next release // print : function() { // this.printer_window = new Ext.ux.PrinterWindow(); // this.printer_window.show(); // this.printer_window.print(); // this.printer_window.close(); // }; Ext.ux.PrinterFriendly.printPreview = function(config) { this.printer_window = new Ext.ux.PrinterWindow(config); this.printer_window.show(); };/* Ext.ux.PrinterFriendly * (c) 2008 Steffen Hiller (http://www.extjswithrails.com) * * License: Ext.ux.PrinterFriendly is licensed under the terms of * the Open Source LGPL 3.0 license. Commercial use is permitted to the extent * that the code/component(s) do NOT become part of another Open Source or Commercially * licensed development library or toolkit without explicit permission. * * License details: http://www.gnu.org/licenses/lgpl.html * * This is an extension for the Ext JS Library, for more information see http://www.extjs.com. *--------------------------------------------------------------------------*/ Ext.ux.PrinterFriendly.onReady = function(fn, scope, options) { if (!Ext.ux.PrinterFriendly.isPrinting()) { Ext.EventManager.onDocumentReady(fn, scope, options); } }; Ext.ux.PrinterFriendly.onPrinting = function(fn, scope, options){ if (Ext.ux.PrinterFriendly.isPrinting()) { Ext.util.CSS.removeStyleSheet('hide-body-css'); Ext.EventManager.onDocumentReady(fn, scope, options); } };/* Ext.ux.PrinterFriendly * (c) 2008 Steffen Hiller (http://www.extjswithrails.com) * * License: Ext.ux.PrinterFriendly is licensed under the terms of * the Open Source LGPL 3.0 license. Commercial use is permitted to the extent * that the code/component(s) do NOT become part of another Open Source or Commercially * licensed development library or toolkit without explicit permission. * * License details: http://www.gnu.org/licenses/lgpl.html * * This is an extension for the Ext JS Library, for more information see http://www.extjs.com. *--------------------------------------------------------------------------*/ Ext.namespace('Ext.ux.PrinterFriendly.util.CSS'); Ext.ux.PrinterFriendly.util.CSS.addStyleSheet = function(url, options){ // var ss = { tag: 'link', rel: 'stylesheet', type: 'text/css', href: url }; // Not working in Safari (DOM Exception 9): // Ext.DomHelper.append(document.getElementsByTagName("head")[0], ss); var defaults = { rel: 'stylesheet', type: 'text/css', media: 'all' }; var options = Ext.apply(defaults, options || {}); var ss = document.createElement("link"); ss.setAttribute("rel", options.rel); ss.setAttribute("type", options.type); ss.setAttribute("media", options.media); ss.setAttribute("href", url); document.getElementsByTagName("head")[0].appendChild(ss); };/* Ext.ux.PrinterFriendly * (c) 2008 Steffen Hiller (http://www.extjswithrails.com) * * License: Ext.ux.PrinterFriendly is licensed under the terms of * the Open Source LGPL 3.0 license. Commercial use is permitted to the extent * that the code/component(s) do NOT become part of another Open Source or Commercially * licensed development library or toolkit without explicit permission. * * License details: http://www.gnu.org/licenses/lgpl.html * * This is an extension for the Ext JS Library, for more information see http://www.extjs.com. *--------------------------------------------------------------------------*/ Ext.namespace("Ext.ux.grid"); Ext.ux.grid.PrinterGridPanel = Ext.extend(Ext.grid.GridPanel, { getView : function(){ if(!this.view){ this.view = new Ext.ux.grid.PrinterGridView(this.viewConfig); } return this.view; } });/* Ext.ux.PrinterFriendly * (c) 2008 Steffen Hiller (http://www.extjswithrails.com) * * License: Ext.ux.PrinterFriendly is licensed under the terms of * the Open Source LGPL 3.0 license. Commercial use is permitted to the extent * that the code/component(s) do NOT become part of another Open Source or Commercially * licensed development library or toolkit without explicit permission. * * License details: http://www.gnu.org/licenses/lgpl.html * * This is an extension for the Ext JS Library, for more information see http://www.extjs.com. *--------------------------------------------------------------------------*/ Ext.ux.grid.PrinterGridView = Ext.extend(Ext.grid.GridView, { init: function(grid){ var ts = this.templates || {}; if(!ts.master){ ts.master = new Ext.Template('<table border="0" cellspacing="0" cellpadding="0" class="x-printer-grid3">', '{header}', '<tbody>', '{body}', '</tbody>', '</table>'); } if(!ts.header){ ts.header = new Ext.Template( '<thead><tr class="x-grid3-hd-row">{cells}</tr></thead>' ); } if(!ts.hcell){ ts.hcell = new Ext.Template( '<td class="x-grid3-hd x-grid3-cell {css}x-grid3-td-{id}" style="{style}" mce_style="{style}">', '{value}', "</td>" ); } if(!ts.row){ ts.row = new Ext.Template( '<tr class="x-grid3-row">{cells}</tr>' ); } if(!ts.cell){ ts.cell = new Ext.Template( '<td class="x-grid3-col x-grid3-cell x-grid3-td-{id} x-grid3-cell-inner {css}" style="{style}" mce_style="{style}" tabIndex="0" {cellAttr}>', '{value}', "</td>" ); } this.templates = ts; Ext.ux.grid.PrinterGridView.superclass.init.call(this, grid); }, initElements : Ext.emptyFn, // private layout : Ext.emptyFn, refresh : function(headersToo){ this.fireEvent("beforerefresh", this); this.grid.stopEditing(); this.renderMaster(); if(headersToo === true){ this.updateHeaders(); this.updateHeaderSortState(); } // this.processRows(0, true); this.layout(); this.applyEmptyText(); this.fireEvent("refresh", this); }, // private renderHeaders : function(){ var cm = this.cm, ts = this.templates; var ct = ts.hcell; var cb = [], sb = [], p = {}; var len = cm.getColumnCount(); var last = len - 1; for(var i = 0; i < len; i++){ p.id = cm.getColumnId(i); p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : ''); p.value = cm.getColumnHeader(i) || " "; p.style = this.getColumnStyle(i, true); cb[cb.length] = ct.apply(p); } return ts.header.apply({cells: cb.join("")}); }, // private renderMaster : function(){ var header = this.renderHeaders(); var rows = this.renderRows(); var body = this.templates.body.apply({rows: rows}); var html = this.templates.master.apply({ header: header, body: body }); this.mainBody = this.grid.getGridEl(); this.mainBody.update(html); }, afterRender : Ext.emptyFn, // private afterRenderUI : function(){ this.renderMaster(); }, // private getColumnStyle : function(col, isHeader){ var style = !isHeader ? (this.cm.config[col].css || '') : ''; // remove width style // style += 'width:'+this.getColumnWidth(col)+';'; if(this.cm.isHidden(col)){ style += 'display:none;'; } var align = this.cm.config[col].align; if(align){ style += 'text-align:'+align+';'; } return style; }, // disabled methods scrollToTop : Ext.emptyFn, updateSortIcon : function(col, dir){}, updateAllColumnWidths : Ext.emptyFn, updateColumnWidth : function(col, width){}, updateColumnHidden : function(col, hidden){} });/* Ext.ux.PrinterFriendly * (c) 2009 Steffen Hiller (http://www.extjswithrails.com) * * License: Ext.ux.PrinterFriendly is licensed under the terms of * the Open Source LGPL 3.0 license. Commercial use is permitted to the extent * that the code/component(s) do NOT become part of another Open Source or Commercially * licensed development library or toolkit without explicit permission. * * License details: http://www.gnu.org/licenses/lgpl.html * * This is an extension for the Ext JS Library, for more information see http://www.extjs.com. *--------------------------------------------------------------------------*/ Ext.ux.grid.PrinterGroupingView = Ext.extend(Ext.ux.grid.PrinterGridView, { // private initTemplates : function(){ Ext.ux.grid.PrinterGroupingView.superclass.initTemplates.call(this); if(!this.startGroup){ this.startGroup = new Ext.XTemplate( '<tr id="{groupId}" class="x-grid-group {cls}">', // '<div id="{groupId}-hd" class="x-grid-group-hd" style="{style}" mce_style="{style}"><div>', this.groupTextTpl ,'</div></div>', '<td colspan="', this.grid.colModel.getColumnCount(true), '"><div id="{groupId}-hd" class="x-grid-group-hd" style="{style}" mce_style="{style}"><div>', this.groupTextTpl ,'</div></div></td>'// , // '<div id="{groupId}-bd" class="x-grid-group-body">' ); } this.startGroup.compile(); this.endGroup = ''; }, getGroup : Ext.grid.GroupingView.prototype.getGroup, getGroupField : Ext.grid.GroupingView.prototype.getGroupField, doGroupStart : Ext.grid.GroupingView.prototype.doGroupStart, doGroupEnd : Ext.grid.GroupingView.prototype.doGroupEnd, renderRows : function(){ var groupField = this.getGroupField(); var eg = !!groupField; // if they turned off grouping and the last grouped field is hidden if(this.hideGroupedColumn) { var colIndex = this.cm.findColumnIndex(groupField); if(!eg && this.lastGroupField !== undefined) { this.mainBody.update(''); this.cm.setHidden(this.cm.findColumnIndex(this.lastGroupField), false); delete this.lastGroupField; }else if (eg && this.lastGroupField === undefined) { this.lastGroupField = groupField; this.cm.setHidden(colIndex, true); }else if (eg && this.lastGroupField !== undefined && groupField !== this.lastGroupField) { this.mainBody.update(''); var oldIndex = this.cm.findColumnIndex(this.lastGroupField); this.cm.setHidden(oldIndex, false); this.lastGroupField = groupField; this.cm.setHidden(colIndex, true); } } return Ext.ux.grid.PrinterGroupingView.superclass.renderRows.apply( this, arguments); }, // private doRender : function(cs, rs, ds, startRow, colCount, stripe){ if(rs.length < 1){ return ''; } var groupField = this.getGroupField(); var colIndex = this.cm.findColumnIndex(groupField); this.enableGrouping = !!groupField; if(!this.enableGrouping || this.isUpdating){ return Ext.grid.GroupingView.superclass.doRender.apply( this, arguments); } var gstyle = 'width :100%;'; var gidPrefix = this.grid.getGridEl().id; var cfg = this.cm.config[colIndex]; var groupRenderer = cfg.groupRenderer || cfg.renderer; var prefix = this.showGroupName ? (cfg.groupName || cfg.header)+': ' : ''; var groups = [], curGroup, i, len, gid; for(i = 0, len = rs.length; i < len; i++){ var rowIndex = startRow + i; var r = rs[i], gvalue = r.data[groupField], g = this.getGroup(gvalue, r, groupRenderer, rowIndex, colIndex, ds); if(!curGroup || curGroup.group != g){ gid = gidPrefix + '-gp-' + groupField + '-' + Ext.util.Format.htmlEncode(g); // if state is defined use it, however state is in terms of expanded // so negate it, otherwise use the default. var isCollapsed = this.state && typeof this.state[gid] !== 'undefined' ? !this.state[gid] : this.startCollapsed; var gcls = isCollapsed ? 'x-grid-group-collapsed' : ''; curGroup = { group: g, gvalue: gvalue, text: prefix + g, groupId: gid, startRow: rowIndex, rs: [r], cls: gcls, style: gstyle }; groups.push(curGroup); }else{ curGroup.rs.push(r); } r._groupId = gid; } var buf = []; for(i = 0, len = groups.length; i < len; i++){ var g = groups[i]; this.doGroupStart(buf, g, cs, ds, colCount); buf[buf.length] = Ext.grid.GroupingView.superclass.doRender.call( this, cs, g.rs, ds, g.startRow, colCount, stripe); this.doGroupEnd(buf, g, cs, ds, colCount); } return buf.join(''); }, });/* Ext.ux.PrinterFriendly * (c) 2008 Steffen Hiller (http://www.extjswithrails.com) * * License: Ext.ux.PrinterFriendly is licensed under the terms of * the Open Source LGPL 3.0 license. Commercial use is permitted to the extent * that the code/component(s) do NOT become part of another Open Source or Commercially * licensed development library or toolkit without explicit permission. * * License details: http://www.gnu.org/licenses/lgpl.html * * This is an extension for the Ext JS Library, for more information see http://www.extjs.com. *--------------------------------------------------------------------------*/ Ext.ux.PrinterWindow = Ext.extend(Ext.Window, { plain: true, modal: true, maximizable: true, initComponent : function() { this.id = 'printer-window'; this.width = this.width || 800; this.height = this.height || 600; this.title = this.title || 'Print Preview'; this.closeText = this.closeText || 'Close'; this.printText = this.printText || 'Print'; this.html = { id: 'printer-iframe', name: 'printer-iframe', tag: 'iframe', src: this.iframeSrc(), width: '100%', height: '100%', frameborder: '0' } this.buttons = [{ text: this.closeText, handler: this.close, scope: this }, { text: this.printText, handler: this.print, scope: this }] Ext.ux.PrinterWindow.superclass.initComponent.call(this); }, show : function(animateTarget, cb, scope) { Ext.ux.PrinterWindow.superclass.show.call(this, animateTarget, cb, scope); this.maximize(); this.tools.restore.hide(); }, print : function() { var iframe_window = this.getIframeWindow(); if (Ext.isIE) { iframe_window.focus(); } iframe_window.print(); }, getIframe : function() { return Ext.get('printer-iframe'); }, getIframeWindow : function() { return this.getIframe().dom.contentWindow; }, // private iframeSrc : function() { var href = window.location.href.split('#')[0]; return href + (href.match(//?/) ? '&' : '?' ) + '_format=printerfriendly'; } });/* Ext.ux.PrinterFriendly * (c) 2008 Steffen Hiller (http://www.extjswithrails.com) * * License: Ext.ux.PrinterFriendly is licensed under the terms of * the Open Source LGPL 3.0 license. Commercial use is permitted to the extent * that the code/component(s) do NOT become part of another Open Source or Commercially * licensed development library or toolkit without explicit permission. * * License details: http://www.gnu.org/licenses/lgpl.html * * This is an extension for the Ext JS Library, for more information see http://www.extjs.com. *--------------------------------------------------------------------------*/ if (Ext.ux.PrinterFriendly.ENABLE_SHORTCUTS) { Ext.onReady = Ext.ux.PrinterFriendly.onReady; Ext.onPrinting = Ext.ux.PrinterFriendly.onPrinting; Ext.isPrinting = Ext.ux.PrinterFriendly.isPrinting; // Ext.print = Ext.ux.PrinterFriendly.print; Ext.printPreview = Ext.ux.PrinterFriendly.printPreview; Ext.addStyleSheet = Ext.ux.PrinterFriendly.util.CSS.addStyleSheet; }/* Ext.ux.PrinterFriendly * (c) 2008 Steffen Hiller (http://www.extjswithrails.com) * * License: Ext.ux.PrinterFriendly is licensed under the terms of * the Open Source LGPL 3.0 license. Commercial use is permitted to the extent * that the code/component(s) do NOT become part of another Open Source or Commercially * licensed development library or toolkit without explicit permission. * * License details: http://www.gnu.org/licenses/lgpl.html * * This is an extension for the Ext JS Library, for more information see http://www.extjs.com. *--------------------------------------------------------------------------*/ if (Ext.ux.PrinterFriendly.isPrinting()) { Ext.ux.PrinterFriendly.util.CSS.addStyleSheet(Ext.ux.PrinterFriendly.ROOT + '/resources/css/printer-friendly.css'); Ext.util.CSS.createStyleSheet('body { display: none }', 'hide-body-css'); } 

array-grid.html

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Array Grid Example</title> <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css" mce_href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css" /> <mce:script type="text/javascript" src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base-debug.js" mce_src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base-debug.js"></mce:script> <mce:script type="text/javascript" src="http://dev.sencha.com/deploy/dev/ext-all-debug.js" mce_src="http://dev.sencha.com/deploy/dev/ext-all-debug.js"></mce:script> <mce:script type="text/javascript" src="PrinterFriendly.config.js" mce_src="PrinterFriendly.config.js"></mce:script> <mce:script type="text/javascript" src="../../build/ext.ux.printerfriendly-debug.js" mce_src="build/ext.ux.printerfriendly-debug.js"></mce:script> <mce:script type="text/javascript" src="array-grid.js" mce_src="array-grid.js"></mce:script> <link rel="stylesheet" type="text/css" href="grid-examples.css" mce_href="grid-examples.css" /> <link rel="stylesheet" type="text/css" href="../shared/examples.css" mce_href="shared/examples.css" /> </head> <body id="body"> <mce:script type="text/javascript" src="../examples.js" mce_src="examples.js"></mce:script> <div id="description"> <p id="print-toolbar"><a href="#" mce_href="#" onClick="Ext.printPreview()">Print Preview</a></p> <h1>Array Grid Example</h1> <p>This example shows how to create a grid from Array data.</p> <p>Note that the js is not minified so it is readable. See <a href="array-grid.js" mce_href="array-grid.js">array-grid.js</a>.</p> </div> <div id="grid-example"></div> </body> </html>  

array-grid.js

/* * This example is based on the array-grid example from the Ext JS library. */ myData = [ ['3m Co',71.72,0.02,0.03,'9/1 12:00am'], ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'], ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'], ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'], ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'], ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'], ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'], ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'], ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'], ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'], ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'], ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'], ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'], ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'], ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'], ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'], ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'], ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'], ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'], ['McDonald/'s Corporation',36.76,0.86,2.40,'9/1 12:00am'], ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'], ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'], ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'], ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'], ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'], ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'], ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'], ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'], ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'], ['3m Co',71.72,0.02,0.03,'9/1 12:00am'], ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'], ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'], ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'], ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'], ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'], ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'], ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'], ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'], ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'], ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'], ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'], ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'], ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'], ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'], ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'], ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'], ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'], ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'], ['McDonald/'s Corporation',36.76,0.86,2.40,'9/1 12:00am'], ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'], ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'], ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'], ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'], ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'], ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'], ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'], ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'], ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'], ['3m Co',71.72,0.02,0.03,'9/1 12:00am'], ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'], ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'], ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'], ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'], ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'], ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'], ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'], ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'], ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'], ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'], ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'], ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'], ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'], ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'], ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'], ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'], ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'], ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'], ['McDonald/'s Corporation',36.76,0.86,2.40,'9/1 12:00am'], ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'], ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'], ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'], ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'], ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'], ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'], ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'], ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'], ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'], ['3m Co',71.72,0.02,0.03,'9/1 12:00am'], ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'], ['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'], ['American Express Company',52.55,0.01,0.02,'9/1 12:00am'], ['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'], ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'], ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'], ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'], ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'], ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'], ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'], ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'], ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'], ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'], ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'], ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'], ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'], ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'], ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'], ['McDonald/'s Corporation',36.76,0.86,2.40,'9/1 12:00am'], ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'], ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'], ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'], ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'], ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'], ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'], ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'], ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'], ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'] ]; // example of custom renderer function function change(val){ if(val > 0){ return '<span style="color:green;" mce_style="color:green;">' + val + '</span>'; }else if(val < 0){ return '<span style="color:red;" mce_style="color:red;">' + val + '</span>'; } return val; } // example of custom renderer function function pctChange(val){ if(val > 0){ return '<span style="color:green;" mce_style="color:green;">' + val + '%</span>'; }else if(val < 0){ return '<span style="color:red;" mce_style="color:red;">' + val + '%</span>'; } return val; } // create the data store store = new Ext.data.SimpleStore({ fields: [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ] }); store.loadData(myData); columns = [ {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'}, {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price'}, {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'}, {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'}, {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ]; Ext.onReady(function(){ // Don't forget to set the state manager, if you want to remember the state for your columns in the printer friendly view (hidden, order, sorting) Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); grid = new Ext.grid.GridPanel({ store: store, columns: columns, stateId: 'array-grid', autoExpandColumn: 'company', height:350, width:600, title:'Array Grid' }); grid.render('grid-example'); grid.getSelectionModel().selectFirstRow(); }); Ext.onPrinting(function(){ // Add stylesheet that get's applied when you open your print preview (and when printing your page) Ext.addStyleSheet("array-grid-printer-friendly.css"); // Or use Ext.util.CSS.swapStyleSheet( String id, String url ) to remove (via id) and add a new StyleSheet // Don't forget to set the state manager, if you want to remember the state for your columns in the printer friendly view (hidden, order, sorting) Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); new Ext.Panel({ renderTo: "body", layout: "table", layoutConfig: { columns: 1 }, border: false, bodyBorder: false, items: [ new Ext.BoxComponent({ el: 'description' }), // Special PrinterGridPanel which is optimized for performance for printing large data sets, // and which shows all rows (since you can't scoll on paper) new Ext.ux.grid.PrinterGridPanel({ store: store, columns: columns, stateId: 'array-grid', autoExpandColumn: 'company', title: 'Array Grid' }) ] }); }); 

同样支持分组grid

grouping.html

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Grid3 Grouping Example</title> <link rel="stylesheet" type="text/css" href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css" mce_href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css" /> <mce:script type="text/javascript" src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base-debug.js" mce_src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base-debug.js"></mce:script> <mce:script type="text/javascript" src="http://dev.sencha.com/deploy/dev/ext-all-debug.js" mce_src="http://dev.sencha.com/deploy/dev/ext-all-debug.js"></mce:script> <mce:script type="text/javascript" src="PrinterFriendly.config.js" mce_src="PrinterFriendly.config.js"></mce:script> <mce:script type="text/javascript" src="../../build/ext.ux.printerfriendly-debug.js" mce_src="build/ext.ux.printerfriendly-debug.js"></mce:script> <mce:script type="text/javascript" src="grouping.js" mce_src="grouping.js"></mce:script> <link rel="stylesheet" type="text/css" href="grid-examples.css" mce_href="grid-examples.css" /> <link rel="stylesheet" type="text/css" href="../shared/examples.css" mce_href="shared/examples.css" /> <mce:style type="text/css"><!-- body .x-panel { margin-bottom:20px; } .icon-grid { background-image:url(../shared/icons/fam/grid.png) !important; } #button-grid .x-panel-body { border:1px solid #99bbe8; border-top:0 none; } .add { background-image:url(../shared/icons/fam/add.gif) !important; } .option { background-image:url(../shared/icons/fam/plugin.gif) !important; } .remove { background-image:url(../shared/icons/fam/delete.gif) !important; } .save { background-image:url(../shared/icons/save.gif) !important; } --></mce:style><style type="text/css" mce_bogus="1"> body .x-panel { margin-bottom:20px; } .icon-grid { background-image:url(../shared/icons/fam/grid.png) !important; } #button-grid .x-panel-body { border:1px solid #99bbe8; border-top:0 none; } .add { background-image:url(../shared/icons/fam/add.gif) !important; } .option { background-image:url(../shared/icons/fam/plugin.gif) !important; } .remove { background-image:url(../shared/icons/fam/delete.gif) !important; } .save { background-image:url(../shared/icons/save.gif) !important; } </style> </head> <body id="body"> <mce:script type="text/javascript" src="../shared/examples.js" mce_src="shared/examples.js"></mce:script> <div id="description"> <p id="print-toolbar"><a href="#" mce_href="#" onClick="Ext.printPreview()">Print Preview</a> <h1>GridView3 Grouping</h1> <p>Note that the js is not minified so it is readable. See <a href="grouping.js" mce_href="grouping.js">grouping.js</a>.</p> </div> </body> </html>  

grouping.js

/* * Ext JS Library 2.2.1 * Copyright(c) 2006-2009, Ext JS, LLC. * licensing@extjs.com * * http://extjs.com/license */ // Array data for the grids Ext.grid.dummyData = [ ['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'], ['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'], ['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'], ['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'], ['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'], ['AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'], ['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'], ['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'], ['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'], ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'], ['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'], ['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'], ['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'], ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'], ['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'], ['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'], ['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'], ['Johnson & Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'], ['JP Morgan & Chase & Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'], ['McDonald/'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'], ['Merck & Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'], ['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'], ['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'], ['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'], ['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'], ['The Procter & Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'], ['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'], ['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'], ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'], ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services'], // adding more data to test print on multiple pages ['3m Co',71.72,0.02,0.03,'4/2 12:00am', 'Manufacturing'], ['Alcoa Inc',29.01,0.42,1.47,'4/1 12:00am', 'Manufacturing'], ['Altria Group Inc',83.81,0.28,0.34,'4/3 12:00am', 'Manufacturing'], ['American Express Company',52.55,0.01,0.02,'4/8 12:00am', 'Finance'], ['American International Group, Inc.',64.13,0.31,0.49,'4/1 12:00am', 'Services'], ['AT&T Inc.',31.61,-0.48,-1.54,'4/8 12:00am', 'Services'], ['Boeing Co.',75.43,0.53,0.71,'4/8 12:00am', 'Manufacturing'], ['Caterpillar Inc.',67.27,0.92,1.39,'4/1 12:00am', 'Services'], ['Citigroup, Inc.',49.37,0.02,0.04,'4/4 12:00am', 'Finance'], ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'4/1 12:00am', 'Manufacturing'], ['Exxon Mobil Corp',68.1,-0.43,-0.64,'4/3 12:00am', 'Manufacturing'], ['General Electric Company',34.14,-0.08,-0.23,'4/3 12:00am', 'Manufacturing'], ['General Motors Corporation',30.27,1.09,3.74,'4/3 12:00am', 'Automotive'], ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'4/3 12:00am', 'Computer'], ['Honeywell Intl Inc',38.77,0.05,0.13,'4/3 12:00am', 'Manufacturing'], ['Intel Corporation',19.88,0.31,1.58,'4/2 12:00am', 'Computer'], ['International Business Machines',81.41,0.44,0.54,'4/1 12:00am', 'Computer'], ['Johnson & Johnson',64.72,0.06,0.09,'4/2 12:00am', 'Medical'], ['JP Morgan & Chase & Co',45.73,0.07,0.15,'4/2 12:00am', 'Finance'], ['McDonald/'s Corporation',36.76,0.86,2.40,'4/2 12:00am', 'Food'], ['Merck & Co., Inc.',40.96,0.41,1.01,'4/2 12:00am', 'Medical'], ['Microsoft Corporation',25.84,0.14,0.54,'4/2 12:00am', 'Computer'], ['Pfizer Inc',27.96,0.4,1.45,'4/8 12:00am', 'Services', 'Medical'], ['The Coca-Cola Company',45.07,0.26,0.58,'4/1 12:00am', 'Food'], ['The Home Depot, Inc.',34.64,0.35,1.02,'4/8 12:00am', 'Retail'], ['The Procter & Gamble Company',61.91,0.01,0.02,'4/1 12:00am', 'Manufacturing'], ['United Technologies Corporation',63.26,0.55,0.88,'4/1 12:00am', 'Computer'], ['Verizon Communications',35.57,0.39,1.11,'4/3 12:00am', 'Services'], ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'4/3 12:00am', 'Retail'], ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'4/1 12:00am', 'Services'] ]; // add in some dummy descriptions for(var i = 0; i < Ext.grid.dummyData.length; i++){ Ext.grid.dummyData[i].push('Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus. Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.<br/><br/>Aliquam commodo ullamcorper erat. Nullam vel justo in neque porttitor laoreet. Aenean lacus dui, consequat eu, adipiscing eget, nonummy non, nisi. Morbi nunc est, dignissim non, ornare sed, luctus eu, massa. Vivamus eget quam. Vivamus tincidunt diam nec urna. Curabitur velit.'); } // make reader globally available (for onReady AND onPrinting) var reader = new Ext.data.ArrayReader({}, [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}, {name: 'industry'}, {name: 'desc'} ]); // make store globally available (for onReady AND onPrinting) store = new Ext.data.GroupingStore({ reader: reader, data: Ext.grid.dummyData, sortInfo:{field: 'company', direction: "ASC"}, groupField:'industry' }); // store = new Ext.data.Store({ // reader: reader, // data: Ext.grid.dummyData, // sortInfo:{field: 'company', direction: "ASC"} // }); // store = new Ext.data.SimpleStore({ // fields: [ // {name: 'company'}, // {name: 'price', type: 'float'}, // {name: 'change', type: 'float'}, // {name: 'pctChange', type: 'float'}, // {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}, // {name: 'industry'}, // {name: 'desc'} // ] // }); // make columns globally available (for onReady AND onPrinting) columns = [ {id:'company',header: "Company", width: 60, sortable: true, dataIndex: 'company'}, {header: "Price", width: 20, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'}, {header: "Change", width: 20, sortable: true, dataIndex: 'change', renderer: Ext.util.Format.usMoney}, {header: "Industry", width: 20, sortable: true, dataIndex: 'industry'}, {header: "Last Updated", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'} ] Ext.onReady(function(){ Ext.QuickTips.init(); var xg = Ext.grid; var grid = new xg.GridPanel({ store: store, columns: columns, view: new Ext.grid.GroupingView({ forceFit:true, groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})' }), frame:true, width: 700, height: 450, collapsible: true, animCollapse: false, title: 'Grouping Example', stateId: 'grouping-example', iconCls: 'icon-grid', renderTo: document.body }); }); /* Ext.ux.PrinterFriendly * (c) 2009 Steffen Hiller (http://www.extjswithrails.com) * * License: Ext.ux.PrinterFriendly is licensed under the terms of * the Open Source LGPL 3.0 license. Commercial use is permitted to the extent * that the code/component(s) do NOT become part of another Open Source or Commercially * licensed development library or toolkit without explicit permission. * * License details: http://www.gnu.org/licenses/lgpl.html * * This is an extension for the Ext JS Library, for more information see http://www.extjs.com. *--------------------------------------------------------------------------*/ Ext.onPrinting(function(){ // Add stylesheet that get's applied when you open your print preview (and when printing your page) Ext.addStyleSheet("grouping-printer-friendly.css"); // Or use Ext.util.CSS.swapStyleSheet( String id, String url ) to remove (via id) and add a new StyleSheet // Don't forget to set the state manager, if you want to remember the state for your columns in the printer friendly view (hidden, order, sorting) Ext.state.Manager.setProvider(new Ext.state.CookieProvider()); new Ext.Panel({ renderTo: "body", // assuming the body tag has the id "body" layout: "table", layoutConfig: { columns: 1 }, border: false, bodyBorder: false, items: [ new Ext.BoxComponent({ el: 'description' // assuming the description is located within a div with id "description" }), // Special PrinterGridPanel which is optimized for performance for printing large data sets, // and which shows all rows (since you can't scoll or 'paginate' on paper) new Ext.ux.grid.PrinterGridPanel({ store: store, columns: columns, view: new Ext.ux.grid.PrinterGroupingView({ groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})' }), stateId: 'grouping-example', autoExpandColumn: 'company', title: 'Array Grid' }) ] }); });