方式一：使用组件的html属性嵌入html代码，如果html代码中存在参数可以使用字符串拼接的方式拼接html代码。

html页面：

 <!doctype html>

 <html>

 <head>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

 <title>Extjs中嵌入html</title> 

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

 <link rel="stylesheet" type="text/css" href="../extjs/ux/grid/css/GridFilters.css" />

 <link rel="stylesheet" type="text/css" href="../extjs/ux/grid/css/RangeMenu.css" /> 

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

 <script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script>

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

 </head>

 <body>

 <%--    内容区--%>

 </body>

 </html>

Extjs代码：

 Ext.Loader.setConfig({

     enabled : true

 });

 Ext.Loader.setPath('Ext.ux', '../extjs/ux');

 Ext.require([ 'Ext.form.*', 'Ext.data.*', 'Ext.grid.Panel' ]);

 Ext.onReady(function() {

     Ext.QuickTips.init();

     var bodyWidth;

     var bodyHeight;

     var panelWidth = bodyWidth;

     var panelHeight = bodyHeight;

     var name = "关羽";

     var sex = "男";

     var table = '<table width="100" border="1" cellspacing="0" cellpadding="0">' +

                   '<tr>' +

                     '<td align="center" valign="middle">姓名</td>' +

                     '<td align="center" valign="middle">性别</td>' +

                   '</tr>' +

                   '<tr>' +

                     '<td align="center" valign="middle">' + name + '</td>' +

                     '<td align="center" valign="middle">' + sex + '</td>' +

                   '</tr>' +

                 '</table>';

     var myPanel = Ext.create('Ext.panel.Panel', {

         id: 'myPanel',

         name: 'myPanel',

         width: panelWidth,

         height: panelHeight,

         title: 'Extjs嵌入html',

         bodyPadding: '10 10 10 10',

         html: table//嵌入html代码

     });

     myPanel.render(document.body);

     Ext.onDocumentReady(function() {

         //gridstoreLoad();

     });

     window.onresize=function(){

         bodyHeight = window.innerHeight?(window.innerHeight<600?600:window.innerHeight):document.documentElement.clientHeight;

         bodyWidth = window.innerWidth?window.innerWidth:document.body.offsetWidth;

     };

 });

方式二：使用template模板嵌入html代码。

Extjs代码：

 Ext.Loader.setConfig({

     enabled : true

 });

 Ext.Loader.setPath('Ext.ux', '../extjs/ux');

 Ext.require([ 'Ext.form.*', 'Ext.data.*', 'Ext.grid.Panel' ]);

 Ext.onReady(function() {

     Ext.QuickTips.init();

     var bodyWidth;

     var bodyHeight;

     var panelWidth = bodyWidth;

     var panelHeight = bodyHeight;

     var myPanel = Ext.create('Ext.panel.Panel', {

         id: 'myPanel',

         name: 'myPanel',

         width: panelWidth,

         height: panelHeight,

         title: 'Extjs嵌入html',

         bodyPadding: '10 10 10 10',

         items: [{

             xtype: 'fieldset',

             id: 'htmlcontent',

             name: 'htmlcontent',

             title: 'Extjs嵌入html',

             width: 800,

             height: 550

         }]

     });

     myPanel.render(document.body);

     var name = "关羽";

     var sex = "男";

     var temp = new Ext.XTemplate(

         '<table width="100" border="1" cellspacing="0" cellpadding="0">',

           '<tr>',

             '<td align="center" valign="middle">姓名</td>',

             '<td align="center" valign="middle">性别</td>',

           '</tr>',

           '<tr>',

             '<td align="center" valign="middle">' + name + '</td>',

             '<td align="center" valign="middle">' + sex + '</td>',

           '</tr>',

         '</table>');

     temp.compile();

     temp.overwrite(Ext.get('htmlcontent'));

     Ext.onDocumentReady(function() {

         //gridstoreLoad();

     });

     window.onresize=function(){

         bodyHeight = window.innerHeight?(window.innerHeight<600?600:window.innerHeight):document.documentElement.clientHeight;

         bodyWidth = window.innerWidth?window.innerWidth:document.body.offsetWidth;

     };

 });

通过使用这些方式，可以访问后台获得数据，在前台进行展示，实现extjs报表功能。

Extjs嵌入html的更多相关文章

  1. Extjs之combobox联动

    Ext.Loader.setConfig({ enabled : true }); Ext.Loader.setPath('Ext.ux', '../extjs/ux'); Ext.require([ ...

  2. .net 实现Office文件预览 Word PPT Excel 2015-01-23 08:47 63人阅读 评论(0) 收藏

    先打个广告: .Net交流群:252713569 本人QQ :524808775 欢迎技术探讨, 近期公司要求上传的PPT和Word都需要可以在线预览.. 小弟我是从来没有接触过这一块的东西 感觉很棘 ...

  3. jsp中的js嵌入Extjs与后台action交互

    近期做前台须要和后台交互数据,直接使用js一直没实现.最后使用extjs实现了,extjs代码直接嵌入到jsp的js代码中就可以(0跟jsp里使用extjs一样,须要载入extjs的几个文件) < ...

  4. ExtJs 使用点滴 十三 在FormPanel 嵌入按钮

    Ext.onReady(function () { //初始化标签中的Ext:Qtip属性. Ext.QuickTips.init(); Ext.form.Field.prototype.msgTar ...

  5. ExtJS 4.2 业务开发(一)主页搭建

    本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主 ...

  6. 开发extjs常用的插件

    Spket是目前支持Ext 2.0最为出色的IDE. 它采用.jsb project file 文件并将继承于基类和所有文档的内容嵌入到生成代码提示的Script doc中.注:不支持配置项的代码提示 ...

  7. extjs的调试方法

    1.使用extjs自带的测试工具 第一步:在ExtJS下载的资源包中,找到debug.js,将JS文件导入实际要运行的HTML或者JSP页面上 第二步:在有关JS文件代码中嵌入Ext.log('自定义 ...

  8. 认识ExtJS(04)--常见Web框架的ExtJS改造

    常见Web框架的ExtJS改造 怎样开始改造工作? 改造主要集中在对表现层的修改,底层的数据库访问不需要进行任何的变动.也就是说主要集中早这2个方面:一方面是表现部分即是JSP页面:另一方面是客户端与 ...

  9. Java源码ExtJS 5 SpringMVC 4Hibernate 4通用后台管理开发框架

    需要源码,请加QQ:858-048-581 一.特色1.采用Spring MVC的静态加载缓存功能,在首页将Javascript文件.CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS ...

随机推荐

  1. Python import / pyd / dll

    使用Python import 模块时, 先会在模块的搜索path里依次搜索(前面会覆盖之后出现的同名模块),次序为: 1. 程序的主目录(交互模式下当前的工作目录或 脚本文件所在的目录) 2. 环境 ...

  2. HDOJ(HDU) 2137 circumgyrate the string(此题用Java-AC不过！坑)

    此题如果有用JavaACDSee,请评论,谢谢了. Problem Description Give you a string, just circumgyrate. The number N mea ...

  3. enigma机的原理

    注:本文修改自三思科学<ENIGMA的兴亡>            ENIGMA ENIGMA看起来是一个装满了复杂而精致的元件的盒子.不过要是我们把它打开来,就可以看到它可以被分解成相当 ...

  4. Greenplum 数据库架构分析

    Greenplum 数据库是最先进的分布式开源数据库技术,主要用来处理大规模的数据分析任务,包括数据仓库.商务智能(OLAP)和数据挖掘等.自2015年10月正式开源以来,受到国内外业内人士的广泛关注 ...

  5. swfit-小知识Demo

    知识点: 重写方法.属性,自动引用计数,throws异常抛出,滚动视图,扩展语法,协议,计时器,UserDefaultsgit项目地址: https://github.com/lu459700780/ ...

  6. HDU - 4815 Little Tiger vs. Deep Monkey （长春赛区C题）

    题意:有A,B两个人.n道题目.每题有相应的分数.B答对题目的概率是0.5.求A不输给B的概率不小于P要拿的最低分数 思路:DP,dp[i][j]来表示B答了前i题后分数为j的概率,,然后通过B的概率 ...

  7. Oracle Minus 取差集

    Oracle Minuskeyword SQL中的MINUSkeyword SQL中有一个MINUSkeyword,它运用在两个SQL语句上,它先找出第一条SQL语句所产生的结果,然后看这些结果有没有 ...

  8. cocos2d-x 3.0 利用python脚本在文件夹Classes内创建class

    因为VS2012创建默认文件是在proj.win32下,新建类不在VS的classes于是编译时找不到类.直接写个脚本帮助新建类(cpp和h文件),还能够在里面加上一些预先写好的代码. 批处理文件Cr ...

  9. Linux基本配置和管理 3 ---- Linux命令行文本处理工具

    1 文件浏览(简单回顾) 1 cat 查看文件的内容 2 more 以翻页的形式查看,但是只能向下翻页 3 less 以翻页的形式查看,但是能够支持向上和向下翻页 4 head 默认是查看前10行,但 ...

  10. 在Quick-cocos2dx中使用云风pbc解析Protocol Buffers，支持win、mac、ios、android

    本例主要介绍 如何将 pbc 集成到quick-cocos2dx框架中,让我们的cocos2dx客户端Lua拥有编解码Protocol Buffers能力. 参考: 云风pbc的用法: http:// ...