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 ...
随机推荐
- LVS+Keepalived+Nginx+Tomcat高可用负载均衡集群配置(DR模式,一个VIP,多个端口)
一.概述 LVS作用:实现负载均衡 Keepalived作用:监控集群系统中各个服务节点的状态,HA cluster. 配置LVS有两种方式: 1. 通过ipvsadm命令行方式配置 2. 通过Red ...
- Python import / pyd / dll
使用Python import 模块时, 先会在模块的搜索path里依次搜索(前面会覆盖之后出现的同名模块),次序为: 1. 程序的主目录(交互模式下当前的工作目录或 脚本文件所在的目录) 2. 环境 ...
- FZYZOJ-1880 【UFO】水管
P1880 -- [ufo]水管 时间限制:1000MS 内存限制:131072KB 通过/提交人数:32/100 状态: 标签: 数学问题-组合数学 无 ...
- #345 div2 D. Image Preview
Vasya's telephone contains n photos. Photo number 1 is currently opened on the phone. It is allowed ...
- SRM 500(2-1000pt)
DIV2 1000pt 题意:给定两个集合A和B,A = {b1*q1i | 0 <= i <= n1-1},B = {b2*q2i | 0 <= i <= n2-1},问将A ...
- C++中的类和对象(一)
一,类的概念及封装 1.什么是封装 第一层含义:封装是面向对象程序设计最基本的特性.把数据(属性)和函数(方法)合成一个整体,这在计算机世界中是用类和对象实现的.(把属性和方法进行封装) 第二层含义: ...
- pandas对象保存到mysql出错提示“BLOB/TEXT column used in key specification without a key length”解决办法
问题 将DataFrame数据保存到mysql中时,出现错误提示: BLOB/TEXT column used in key specification without a key length 原因 ...
- quartz 定时任务的实现
需求:项目中有一个任务,当时间到了会向移动端通过百度云推送推送信息,之前很傻叉的是写一个多线程一直扫描,每分钟扫描一次,比对当前时间和任务时间是否一样,结果把 项目跑死了,项目中用了一个简单的quar ...
- 黑马程序猿_Java 代理机制学习总结
-------<a href="http://www.itheima.com/"">android培训</a>.<a href=" ...
- ubuntu开机黑屏
以下皆在VM虚拟机下 (1)ctr+alt+f4 进入命令行 (2) sudo apt-get update sudo apt-get install xserver-xorg-lts-quantal ...