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