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

html页面：

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.  <title>Extjs中嵌入html</title> 
  6.  
  7.  <link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css" />
  8.  <link rel="stylesheet" type="text/css" href="../extjs/ux/grid/css/GridFilters.css" />
  9.  <link rel="stylesheet" type="text/css" href="../extjs/ux/grid/css/RangeMenu.css" /> 
  10.  
  11.  <script type="text/javascript" src="../extjs/ext-all.js"></script>
  12.  <script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script>
  13.  <script type="text/javascript" src="../js/embedhtml/embedhtml.js"></script>
  14.  
  15.  </head>
  16.  <body>
  17.  
  18.  <%--    内容区--%>
  19.  
  20.  </body>
  21.  </html>

Extjs代码：

  1.  Ext.Loader.setConfig({
  2.      enabled : true
  3.  });
  4.  Ext.Loader.setPath('Ext.ux', '../extjs/ux');
  5.  Ext.require([ 'Ext.form.*', 'Ext.data.*', 'Ext.grid.Panel' ]);
  6.  
  7.  Ext.onReady(function() {
  8.      Ext.QuickTips.init();
  9.      var bodyWidth;
  10.      var bodyHeight;
  11.      var panelWidth = bodyWidth;
  12.      var panelHeight = bodyHeight;
  13.  
  14.      var name = "关羽";
  15.      var sex = "男";
  16.  
  17.      var table = '<table width="100" border="1" cellspacing="0" cellpadding="0">' +
  18.                    '<tr>' +
  19.                      '<td align="center" valign="middle">姓名</td>' +
  20.                      '<td align="center" valign="middle">性别</td>' +
  21.                    '</tr>' +
  22.                    '<tr>' +
  23.                      '<td align="center" valign="middle">' + name + '</td>' +
  24.                      '<td align="center" valign="middle">' + sex + '</td>' +
  25.                    '</tr>' +
  26.                  '</table>';
  27.  
  28.      var myPanel = Ext.create('Ext.panel.Panel', {
  29.          id: 'myPanel',
  30.          name: 'myPanel',
  31.          width: panelWidth,
  32.          height: panelHeight,
  33.          title: 'Extjs嵌入html',
  34.          bodyPadding: '10 10 10 10',
  35.          html: table//嵌入html代码
  36.      });
  37.      myPanel.render(document.body);
  38.  
  39.      Ext.onDocumentReady(function() {
  40.          //gridstoreLoad();
  41.      });
  42.  
  43.      window.onresize=function(){
  44.          bodyHeight = window.innerHeight?(window.innerHeight<600?600:window.innerHeight):document.documentElement.clientHeight;
  45.          bodyWidth = window.innerWidth?window.innerWidth:document.body.offsetWidth;
  46.      };
  47.  
  48.  });

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

Extjs代码：

  1.  Ext.Loader.setConfig({
  2.      enabled : true
  3.  });
  4.  Ext.Loader.setPath('Ext.ux', '../extjs/ux');
  5.  Ext.require([ 'Ext.form.*', 'Ext.data.*', 'Ext.grid.Panel' ]);
  6.  
  7.  Ext.onReady(function() {
  8.      Ext.QuickTips.init();
  9.      var bodyWidth;
  10.      var bodyHeight;
  11.      var panelWidth = bodyWidth;
  12.      var panelHeight = bodyHeight;
  13.  
  14.      var myPanel = Ext.create('Ext.panel.Panel', {
  15.          id: 'myPanel',
  16.          name: 'myPanel',
  17.          width: panelWidth,
  18.          height: panelHeight,
  19.          title: 'Extjs嵌入html',
  20.          bodyPadding: '10 10 10 10',
  21.          items: [{
  22.              xtype: 'fieldset',
  23.              id: 'htmlcontent',
  24.              name: 'htmlcontent',
  25.              title: 'Extjs嵌入html',
  26.              width: 800,
  27.              height: 550
  28.          }]
  29.      });
  30.      myPanel.render(document.body);
  31.  
  32.      var name = "关羽";
  33.      var sex = "男";
  34.      var temp = new Ext.XTemplate(
  35.          '<table width="100" border="1" cellspacing="0" cellpadding="0">',
  36.            '<tr>',
  37.              '<td align="center" valign="middle">姓名</td>',
  38.              '<td align="center" valign="middle">性别</td>',
  39.            '</tr>',
  40.            '<tr>',
  41.              '<td align="center" valign="middle">' + name + '</td>',
  42.              '<td align="center" valign="middle">' + sex + '</td>',
  43.            '</tr>',
  44.          '</table>');
  45.      temp.compile();
  46.      temp.overwrite(Ext.get('htmlcontent'));
  47.  
  48.      Ext.onDocumentReady(function() {
  49.          //gridstoreLoad();
  50.      });
  51.  
  52.      window.onresize=function(){
  53.          bodyHeight = window.innerHeight?(window.innerHeight<600?600:window.innerHeight):document.documentElement.clientHeight;
  54.          bodyWidth = window.innerWidth?window.innerWidth:document.body.offsetWidth;
  55.      };
  56.  
  57.  });

通过使用这些方式，可以访问后台获得数据，在前台进行展示，实现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. 【二分】【最长上升子序列】HDU 5489 Removed Interval (2015 ACM/ICPC Asia Regional Hefei Online)

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5489 题目大意: 一个N(N<=100000)个数的序列,要从中去掉相邻的L个数(去掉整个区间 ...

  2. 我家用的网络IP地址给定，MAC绑定，我买了个无线路由器，请问怎么设定能让我的电脑和手机都能上网

    我家用的网络IP地址给定,MAC绑定,我买了个无线路由器,请问怎么设定能让我的电脑和手机都能上网   房东给的IP地址是:192.168.1.5 255.255.255.0 192.168.1.1 2 ...

  3. kafka 消息服务

    apache kafka参考 http://kafka.apache.org/documentation.html 消息队列方式: 点对点: 消息生产者生产消息发送到queue中,然后消息消费者从qu ...

  4. 对MMU段式转换的理解

    本文将详细介绍MMU段式转换的过程,并在文末附上一篇讲MMU比较详细的文章.具体什么是MMU,什么时段是转换就不在本文讲了,直接戳文末的链接. 首先,进行段式转换的条件.我们要拥有一个虚拟地址,还有一 ...

  5. python 代码格式化工具：pep8ify

    资料: https://github.com/spulec/pep8ify 安装 $ pip install pep8ify 用法 Usage: 2to3 [options] file|dir ... ...

  6. Flex3在应用RemoteObject出现问题解决方法

    出现该问题 <mx:RemoteObject id="robj" destination="hello" endpoint="http://lo ...

  7. codeforces 610B

    Description Vika has n jars with paints of distinct colors. All the jars are numbered from 1 to n an ...

  8. session与cookie的关系

    客户第一次发送请求给服务器,此时服务器产生一个唯一的sessionID,并返回给客户端(通过cookie),此时的cookie并没有setMaxAge();只是保存于客户端的内存中,并与一个浏览器窗口 ...

  9. typedef struct

    突然忘了这玩意儿了..今天就来搞一发 typedef是类型定义的意思.typedef struct 是为了使用这个结构体方便.具体区别在于:若struct node {}这样来定义结构体的话.在申请n ...

  10. Django admin进阶

    1. ModelAdmin.inlines 将有外键的子类包含进视图 ,实例: class Author(models.Model): name = models.CharField(max_leng ...