Extjs嵌入html
生活随笔
收集整理的這篇文章主要介紹了
Extjs嵌入html
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
方式一：使用組件的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.οnresize=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.οnresize=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報表功能。
轉載于:https://www.cnblogs.com/smallrock/p/3538327.html
總結
以上是生活随笔為你收集整理的Extjs嵌入html的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CV 里程计、推算定位与视觉里程计 简介
- 下一篇： 不插网线终端缓慢的问题解决办法