Extjs 中在一个Panel中嵌入html元素

最新推荐文章于 2021-06-18 14:25:43 发布

原创最新推荐文章于 2021-06-18 14:25:43 发布 · 1.5w 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Ext JS #ExtJs嵌入html

ExtJs 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种使用Ext JS框架构建的一卡通信息管理平台的用户界面设计与实现过程，包括布局、样式、交互元素以及关键功能模块的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

代码示例：

var menuPanel = new Ext.Panel({
	region : "north",
	//autoHeight : true,
	split : true,
	layout : "fit",
	border : false,
	contentEl : "north",
	height:90,
	collapseMode : "mini",
   	html:"<table cellpadding='0' cellspacing='0' style='width:100%; height:100%; font-size: 12; border: 0; '  style='background: #CAE1FF;'><tr>"+
                    "<td width='10%' style='padding-left:30;'><font color='#66B3FF' size='6'><b><i>一卡通信息管理平台</i></b></font>"+
                    "</td>"+
                    "<td width='10%' align='right' valign='top' style='background: #CAE1FF;'> </td>"+
                    "<td width='10%' align='right' valign='top' style='background: #CAE1FF;'> </td>"+
                    "<td width='35%' align='right' valign='top' style='background: #CAE1FF;'> </td>"+
                    "<td width='35%' align='right' valign='top' style='background: #CAE1FF;'><a href='./jxy/userExitAction'><img src='./Image/CardSystem/cancel.png'></img><font color='red'>用户退出</font></a>  <a href='welcome.jsp'><img style='margin-top:5px;' src='./ExtJs/control_images/icons/indexicon.gif'></img><font color='green'>返回主页</font></a></td>"+
             "</tr><tr style='background: #CAE1FF;'>"+
             "<td width='50%' style='padding-left:10;'><font color='#4D4D4D' size='2'><b>操作员：" + userTrueName + "      角色：" + userRole +"      组织：" + userOrgan + "</b></font></td>"+
             "<td width='10%'> </td>"+
             "<td width='10%'> </td>"+
             "<td width='35%'> </td>"+
             "<td width='35%'> </td>"+
             "</tr></table>"	
});

在Panel的属性中有一个是html，属性值中就可以定义网页元素，和在html文件中写法一样的。