extjs4打印grid插件资源-CSDN文库

共8个文件

png：3个

css：2个

js：1个

extjs4

打印grid插件

printer

4星 · 超过85%的资源需积分: 10 131 浏览量 2012-08-14 18:14:47 上传评论 3 收藏 45KB RAR 举报

ExtJS4是一款强大的JavaScript框架，用于构建富客户端Web应用程序。Grid是ExtJS中的核心组件，它提供了一种灵活的方式来展示和操作数据集。在ExtJS4中，有时我们需要实现打印Grid的功能，以便用户能够将屏幕上的数据显示在纸质或PDF文档上。这就是"extjs4打印grid插件"的作用。打印Grid插件是为了满足这种需求而设计的，它允许开发者扩展ExtJS4 Grid Panel的功能，使其具备打印能力。这个插件通常包含一系列方法和配置选项，用于自定义打印样式、布局以及要打印的数据范围。在"extjs4-ux-gridprinter"这个压缩包中，我们可能会找到以下关键文件和资源： 1. **源代码文件**：可能包括.js文件，这些文件实现了打印插件的逻辑，可能包含GridPrinter类，该类扩展了ExtJS的GridPanel，添加了打印功能。 2. **示例程序**：可能包含.html和.js文件，这些文件展示了如何在实际应用中使用这个插件。示例程序通常会有一个简单的Grid Panel，用户可以通过点击一个打印按钮来调用插件的打印功能。 3. **CSS样式表**：可能包含.css文件，这些文件定义了打印时Grid的样式。因为浏览器在打印时通常会忽略网页样式，所以需要专门的打印样式来确保Grid在打印时保持良好的格式。 4. **文档**：可能包含.md或.html文件，这些文件提供了关于如何配置和使用打印插件的详细说明，包括如何引入插件、设置打印参数、自定义打印模板等。 5. **示例数据**：可能有.json或.js文件，包含了用于填充Grid的数据。使用这个插件，开发者可以控制以下方面： - **选择打印范围**：可以选择打印整个Grid，或者只打印特定的行或列。 - **定制页眉和页脚**：可以添加自定义的页眉和页脚信息，如页码、日期等。 - **样式调整**：可以调整打印样式，使其适应黑白打印或者彩色打印。 - **分页**：如果数据量大，可以设置分页进行打印，避免单个页面过长。 - **预览功能**：在打印前提供预览，让用户确认打印效果。为了在项目中使用这个插件，首先需要将相关文件引入到HTML页面，然后在Grid配置中启用打印插件，并设置相应的参数。在用户触发打印操作时，调用插件提供的方法，如`print()`，完成打印过程。 "extjs4打印grid插件"是ExtJS4开发中非常实用的一个工具，它为Grid Panel提供了方便的打印功能，极大地丰富了用户体验，特别是在数据报告和数据分析场景中。通过深入理解和使用这个插件，开发者可以更好地满足用户对数据可视化的多样化需求。

资源推荐

资源详情

资源评论

收起资源包目录

extjs4-ux-gridprinter.rar （8个子文件）

extjs4-ux-gridprinter

example.html 6KB

grid

Printer.js 10KB

gridPrinterCss

print.css 3KB

printer.png 3KB

cross.png 655B

resources

images

printer.png 47KB

example.css 129B

readme.textile 1KB

<html> <head> <title>Grid with GridPrinter feature</title>  <link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-4.0.2/resources/css/ext-all.css" /> <script type="text/javascript" src="http://extjs.cachefly.net/ext-4.0.2/bootstrap.js"></script>  <link rel="stylesheet" type="text/css" href="resources/example.css" /> <script type="text/javascript"> Ext.Loader.setConfig({enabled: true}); Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.ux.grid.Printer', ]); Ext.onReady(function() { // sample static data for the store var 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'] ]; /** * Custom function used for column renderer * @param {Object} val */ function change(val) { if (val > 0) { return '<span style="color:green;">' + val + '</span>'; } else if (val < 0) { return '<span style="color:red;">' + val + '</span>'; } return val; } /** * Custom function used for column renderer * @param {Object} val */ function pctChange(val) { if (val > 0) { return '<span style="color:green;">' + val + '%</span>'; } else if (val < 0) { return '<span style="color:red;">' + val + '%</span>'; } return val; } // create the data store var store = Ext.create('Ext.data.ArrayStore', { fields: [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ], data: myData }); // create the Grid var grid = Ext.create('Ext.grid.Panel', { store: store, stateful: true, stateId: 'stateGrid', columns: [ { text : 'Company', flex : 1, sortable : false, dataIndex: 'company' }, { text : 'Price', width : 75, sortable : true, renderer : 'usMoney', dataIndex: 'price' }, { text : 'Change', width : 75, sortable : true, renderer : change, dataIndex: 'change' }, { text : '% Change', width : 75, sortable : true, renderer : pctChange, dataIndex: 'pctChange' }, { text : 'Last Updated', width : 85, sortable : true, renderer : Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' } ], height: 350, width: 600, title: 'Array Grid with Print Option', renderTo: Ext.getBody(), tbar: [{ text: 'Print', iconCls: 'icon-print', handler : function(){ Ext.ux.grid.Printer.printAutomatically = false; Ext.ux.grid.Printer.print(grid); } }] }); }); </script> </head> <body> </body> </html>

评论收藏

内容反馈