Extjs嵌入html

浏览数：114 / 时间：2015年06月09日

方式一：使用组件的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 });