`
天空之城
  • 浏览: 405543 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJs之grid打印

EXTExcelJavaScriptCSS浏览器 
阅读更多

在程序实现之前首先要做的就是打开一个IE点击“工具栏--Internet选项--安全选项卡--Internet--自定义级别--将其中的所有与ActiveX有关的项目点为启用”同时确保你的机器上已经安装了excel。

aa.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>extjs初级--panel(老式写法)</title>

  
     <link rel="stylesheet" type="text/css"
    href="ext/resources/css/ext-all.css" />

   <script type="text/javascript" src="ext/adapter/ext/ext-base.js">
   </script>
  
   <script type="text/javascript" src="ext/ext-all.js"></script>

   <script type="text/javascript" src="test/hhh.js"></script>

</head>
<body>
<div id='aaa'>
<div id='aa'></div>
</div>
</body>
</html>
 

 

hhh.js

 

 

Ext.onReady(function() {

var centersm = new Ext.grid.CheckboxSelectionModel();
var centercm = new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
    centersm, {
     header : "rid",
     width : 100,
     hidden : true,
     align : "center",
     dataIndex : "rid"
    }, {
     header : "角色",
     width : 110,
     align : "center",
     dataIndex : "rolename"
    }]);
var centerdata = [{
     rid : 423,
     rolename : "管理员"
    }, {
     rid : 434,
     rolename : "库管"
    }, {
     rid : 546,
     rolename : "采样员"
    }, {
     rid : 778,
     rolename : "注射员"
    }, {
     rid : 443,
     rolename : "化验员"
    }]
var centerproxy = new Ext.data.MemoryProxy(centerdata);
var centeruser = Ext.data.Record.create([{
     name : "rid",
     type : "int",
     mapping : "rid"
    }, {
     name : "rolename",
     type : "string",
     mapping : "rolename"
    }]);
var centerreader = new Ext.data.JsonReader({}, centeruser);
var centerstore = new Ext.data.Store({
     proxy : centerproxy,
     reader : centerreader,
     autoLoad : true
    });

var grid = new Ext.grid.GridPanel({
     region : "center",
     renderTo : Ext.getBody(),
     store : centerstore,
     cm : centercm,
     sm : centersm,
     id : "centerid",
     height : 200,
     loadMask : {
      msg : '正在加载数据,请稍后...'
     },
     bodyStyle : "width:33%",
     autoWidth : true,
     tbar : [{
        text : "打印",
        id : "aaa",
        icon : "test/image/vcard.png",
        cls : "x-btn-text-icon",
        handler : function(){
           downloadViewData(grid);
        }
       }]

    });
function downloadViewData(grid) {

   try {
    var xls = new ActiveXObject("Excel.Application");
   } catch (e) {
    alert("要打印该表，您必须安装Excel电子表格软件，同时浏览器须使用“ActiveX 控件”，您的浏览器须允许执行控件。 请点击【帮助】了解浏览器设置方法！");
    return "";
   }
   var cm = grid.getColumnModel();
   var colCount = cm.getColumnCount();
  
   xls.visible = true; // 设置excel为可见
   var xlBook = xls.Workbooks.Add;
   var xlSheet = xlBook.Worksheets(1);
  
   var temp_obj = [];
   // 只下载没有隐藏的列(isHidden()为true表示隐藏,其他都为显示)
   // 临时数组,存放所有当前显示列的下标
   for (i = 2; i < colCount; i++) {
    if (cm.isHidden(i) == true) {
    } else {
     temp_obj.push(i);
    }
   }
   for (i = 1; i <= temp_obj.length; i++) {
    // 显示列的列标题
    alert(cm.getColumnHeader(temp_obj[i - 1]));
    xlSheet.Cells(1, i).Value = cm.getColumnHeader(temp_obj[i - 1]);
   }
   var store = grid.getStore();
   var recordCount = store.getCount();
   var view = grid.getView();
   for (i = 1; i <= recordCount; i++) {
    for (j = 1; j <= temp_obj.length; j++) {
     // EXCEL数据从第二行开始,故row = i + 1;
     xlSheet.Cells(i + 1, j).Value = view.getCell(i - 1, temp_obj[j
         - 1]).innerText;
    }
   }
   xlSheet.Columns.AutoFit;
   xls.ActiveWindow.Zoom = 75
   xls.UserControl = true; // 很重要,不能省略,不然会出问题 意思是excel交由用户控制
   xls = null;
   xlBook = null;
   xlSheet = null;
}

})
 
分享到：
| informix数据库下导出表结构
评论
发表评论

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

相关推荐

    extjs4打印grid插件

    总的来说，"extjs4打印grid插件"是ExtJS4开发中非常实用的一个工具，它为Grid Panel提供了方便的打印功能，极大地丰富了用户体验，特别是在数据报告和数据分析场景中。通过深入理解和使用这个插件，开发者可以更好地...

    EXTJS打印源代码

    EXTJS是一种基于JavaScript的富客户端应用框架，专用于构建企业级的Web应用程序。EXTJS提供了丰富的组件库，包括数据绑定、可拖放功能、高级...通过研究这些文件，你可以更深入地了解EXTJS grid打印功能的实现细节。

    Extjs 局部打印

    extjs 打印局部层，打印弹出window，grid，panel等！

    extjs打印功能

    ### ExtJS 打印功能详解 #### 一、概述 ExtJS 是一款强大的 JavaScript 框架，用于构建复杂的前端应用程序。它提供了丰富的组件库，包括数据网格(grid)、窗体(form)等，并且支持高级功能如拖放、动态加载等。在...

    ExtJS中文手册.doc

    关于文件名称列表中的"ExtJS中文手册.doc"，这表明手册以Microsoft Word文档格式提供，方便开发者打印或离线阅读。可能包含以下章节： 1. **基础概念**：介绍ExtJS的基本结构，如类系统、MVC模式、组件生命周期等。...

    extjs实现报表

    - **打印支持**：使用ExtJS的Print Manager或第三方库实现报表的打印功能。 - **数据导出**：将报表数据导出为Excel、CSV或其他格式，便于进一步处理。 9. **性能优化** - **远程排序和过滤**：减轻客户端负担，...

    extjs-grid-converter:将 extjs 网格面板转换为其他内容（如 html 表或 ods 文件）的助手

    extjs-grid-converter 将 extjs 网格面板转换为其他内容（如 html 表或 ods 文件）的助手GridToHtmlTable 当您需要打印或以某种方式导出 exjs 应用程序中显示的网格数据时，请使用此转换器。 此转换器还会转换嵌套列...

    Extjs3 API

    除了核心库，还有许多社区开发的扩展和插件，如Grid增强、图表库增强、打印功能等，进一步丰富了ExtJS 3的功能。 综上所述，ExtJS 3 API包含了构建高性能Web应用所需的各种组件和机制。通过使用这个CHM版本的API...

    extjs实践大量实例讲解

    ### ExtJS 实践大量实例讲解 #### 概述 ExtJS 是一款用于构建现代 Web 应用的强大框架，它提供了一系列丰富的 UI 组件、数据处理功能以及与后端交互的能力。本文将通过大量的实例来讲解如何使用 ExtJS 来开发高...

    ExtJS4.1实现的mvc模式经典入门案例

    在ExtJS中，视图通常由组件（components）构成，如面板（Panel）、表格（Grid）、树形控件（Tree）等。视图与模型关联，通过监听器（listeners）响应模型的变化，更新界面。 在本案例中，`mvc_tree`可能是一个树形...

    extgrid导出excel

    "extgrid导出excel"这个主题是关于如何将ExtJS中的数据网格（Ext Grid）的数据导出到Excel文件中，方便用户进行数据管理和分析。 首先，让我们深入了解一下Ext Grid。Ext Grid是一种用于展示和操作大量结构化数据的...

    这是我学习Extjs3.0+asp.net所敲的示例希望有用

    "grid打印"功能可能是实现了一个组件或方法，允许用户将ExtJS的Grid面板内容导出或打印出来。Grid面板是ExtJS中一个非常重要的组件，它用于显示和操作表格数据。能够打印Grid面板的内容有助于用户在没有网络连接的...

    EXTJS 服装批发网站后台

    用户可以通过EXTJS的FormPanel进行订单详情的填写和编辑，而EXTJS的ToolBar可能包含按钮来执行保存、取消、打印等操作。同时，为了处理订单状态的变更，EXTJS的事件监听和处理机制将起到关键作用。 3. **文件结构...

    GridPanel打印

    在EXTJS开发中，GridPanel是核心组件之一，它用于展示结构化的数据，通常带有分页、排序和过滤功能。当用户需要将GridPanel中的数据打印出来时，我们就需要实现“GridPanel打印”功能。 首先，EXTJS提供了`Ext.grid...

    Ext JS 3.1.1 Ultimate 版

    5. **打印支持**：组件的打印功能，可以将Web页面的部分或全部内容导出为PDF或其他格式。 三、使用Ext JS 3.1.1 的注意事项： 1. **兼容性**：虽然Ext JS 3.x系列对当时的主流浏览器有良好的支持，但随着浏览器的...

    RDF 使用帮助

    RDF 封装了 ExtJS 中最常用的布局方式之一——边框布局（Border Layout）。边框布局是一种灵活且高效的布局管理器，适用于创建具有多区域的复杂用户界面。在 RDF 中，可以通过简单的 HTML 属性设置来应用这种布局。 ...

    ext文档+资料集合

    用户可以通过这个文档快速了解EXT JS的基本结构，如Grid面板、Form表单、Tree视图等，并学习如何创建和配置这些组件。同时，中文文档对于中国开发者来说是非常实用的，能够帮助他们更顺畅地理解和使用EXT JS。 ...

    EXT中文文档,EXT简明教程（Ajax框架）

    你可以通过这个文档了解到EXT的基础组件，如表格（Grid）、面板（Panel）、窗口（Window）、表单（Form）等，以及如何进行布局管理、数据绑定、Ajax通信等核心功能。同时，它还涵盖了EXT的高级特性，如树形视图...

    UniGUI集合说明

    使用Grid+Report报表控件的方法是一种推荐的解决方案，它结合了数据网格与报表的功能，能够更灵活地展示和打印数据。 #### 33. UniGUI的布局面板控件TUniRegionPanel `TUniRegionPanel`是一种用于布局控制的容器...

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