Extjs嵌入html
方式一：使用组件的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的更多相关文章
- Extjs之combobox联动
Ext.Loader.setConfig({ enabled : true }); Ext.Loader.setPath('Ext.ux', '../extjs/ux'); Ext.require([ ...
- .net 实现Office文件预览 Word PPT Excel 2015-01-23 08:47 63人阅读 评论(0) 收藏
先打个广告: .Net交流群:252713569 本人QQ :524808775 欢迎技术探讨, 近期公司要求上传的PPT和Word都需要可以在线预览.. 小弟我是从来没有接触过这一块的东西 感觉很棘 ...
- jsp中的js嵌入Extjs与后台action交互
近期做前台须要和后台交互数据,直接使用js一直没实现.最后使用extjs实现了,extjs代码直接嵌入到jsp的js代码中就可以(0跟jsp里使用extjs一样,须要载入extjs的几个文件) < ...
- ExtJs 使用点滴 十三 在FormPanel 嵌入按钮
Ext.onReady(function () { //初始化标签中的Ext:Qtip属性. Ext.QuickTips.init(); Ext.form.Field.prototype.msgTar ...
- ExtJS 4.2 业务开发(一)主页搭建
本篇开始搭建一个ExtJS 4.2单页面应用, 这里先介绍主页的搭建,内容包括:主页结构说明.扩展功能等方面. 目录 1. 主页结构说明 2. 扩展功能 3. 在线演示 1. 主页结构说明 1.1 主 ...
- 开发extjs常用的插件
Spket是目前支持Ext 2.0最为出色的IDE. 它采用.jsb project file 文件并将继承于基类和所有文档的内容嵌入到生成代码提示的Script doc中.注:不支持配置项的代码提示 ...
- extjs的调试方法
1.使用extjs自带的测试工具 第一步:在ExtJS下载的资源包中,找到debug.js,将JS文件导入实际要运行的HTML或者JSP页面上 第二步:在有关JS文件代码中嵌入Ext.log('自定义 ...
- 认识ExtJS(04)--常见Web框架的ExtJS改造
常见Web框架的ExtJS改造 怎样开始改造工作? 改造主要集中在对表现层的修改,底层的数据库访问不需要进行任何的变动.也就是说主要集中早这2个方面:一方面是表现部分即是JSP页面:另一方面是客户端与 ...
- Java源码ExtJS 5 SpringMVC 4Hibernate 4通用后台管理开发框架
需要源码,请加QQ:858-048-581 一.特色1.采用Spring MVC的静态加载缓存功能,在首页将Javascript文件.CSS文件和图片等静态资源文件加载进来放进内存,极大提高ExtJS ...
随机推荐
- Delphi 弹出Windows风格的选择文件夹对话框， 还可以新建文件夹
Delphi 弹出Windows风格的选择文件夹对话框, 还可以新建文件夹 unit Unit2; interface uses Windows, Messages, SysUtils, V ...
- quartus中查看网表
查看编译之后生成的逻辑结构 tools->Netlist Viewers->RTL vierer
- 配置Chrome启动参数支持本地AJAX请求，解决XMLHttpRequest cannot load file..,Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest':.. 问题
直接将本地的HTML文件拖拽到Chrome浏览器中运行时,发送的AJAX请求本地文件,会报跨域错误: 报错的原因是:Chrome默认不支持本地的AJAX请求! 解决问题的办法是:给Chrome浏览器添 ...
- ubuntu server 14.04 vncserver with gnome
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAvkAAAGdCAIAAAAHU/v+AAAgAElEQVR4nO3dv4skR5738fsX8g+Zf0
- The Minimum Length - HUST 1010（求最小循环节）
题意:有个一字符串A(本身不是循环串),然后经过很多次自增变成AAAAA,然后呢从自增串里面切出来一部分串B,用这个串B求出来A的长度. 分析:其实就是求最小循环节.......串的长度 - 最大 ...
- umlの用例图
我的总结是在看完uml学习之后又參考了同学借的<uml和ooad高速入门>的思路,利用齿轮带动的原理进行.废话不多说了.首先分析一下类图和用例图的联系与差别. 类图 用例图 类class ...
- css3之 media query 使用(转)
原文链接:http://www.moke8.com/article-5657-1.html 讲到响应式布局, 相信大家都有一定的了解,响应式布局是今年很流行的一个设计理念,随着移动互联网的盛行,为解决 ...
- Android图片异步加载之Android-Universal-Image-Loader（转）
今天要介绍的是Github上一个使用非常广泛的图片异步加载库Android-Universal-Image-Loader,该项目的功能十分强大,可以说是我见过的目前功能最全.性能最优的图片异步加载解决 ...
- Android Studio学习随笔-移动动画的实现
在上一篇博客我已经讲述了三种事件的实现方法,而现在我用复用方法来实现控件的自动移动,当然要实现控件的移动,先得在activity_main.xml文件中放置一个控件,此处我放置的是一个button控件 ...
- PHP: 深入pack/unpack <转> [链接]
PHP: 深入pack/unpack PHP: chr和pack.unpack那些 PHP: pack/unpack补遗