方式一：使用组件的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报表功能。