ext_panel4border

最新推荐文章于 2021-07-13 10:01:01 发布

包达叔

最新推荐文章于 2021-07-13 10:01:01 发布

阅读量117

点赞数

文章标签： EXT IE HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all-debug.js"></script>
<style>
.infotd{border-bottom:#B3CAFB dashed 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.x-panel-header {
line-height:15px;
}
</style>

<script>
function fn(){
//菜单部分
var westMenu = new Ext.Panel({
   id:'westPanel',
   border:false,
	region:'west',
	split: true,
	header:false,
   useSplitTips:true,
   collapsibleSplitTip:'可拖动，双击收起',
	collapseMode:'mini',
   collapsible:true,
	width:200,
	height:530,
	layout:'border',
	frame:false,
	style:'text-align:left',
	items:[ {
   		id:'westNorth',
   		region:'north',
   		border:true,
   		split: true,
         useSplitTips:true,
         collapsibleSplitTip:'可拖动，双击收起',
   		collapseMode:'mini',
         collapsible:true,
   		height:200,
   		title:'菜单上面',
   	   html:'菜单上面'
   },{
		id:'westCenter',
		region:'center',
		border:true,
		title:'菜单下面',
	   html:'菜单下面'
	}]
});

var eastInfo = new Ext.Panel({
   layout:'border',
	region:'east',
	split: true,
	header:false,
   useSplitTips:true,
   collapsibleSplitTip:'可拖动，双击收起',
	collapseMode:'mini',
   collapsible:true,
	width:200,
	height:530,
	border:false,
	frame:false,
	style:'text-align:left',
	items:[ {
   		region:'north',
   		height:200,
   		title:'上面部分',
   	   html:'<table style=width:100%;table-layout:fixed;><tr><td  class=infotd>上面的内容很多很多很多很多哦</td></tr></table>'
   },{
		id:'eastCenter',
		border:true,
		region:'center',
		title:'下面部分',
	   html:'下面部分'
	}]
});

new Ext.Panel({
	layout:'border',
	id:'mainPanel',
	applyTo:document.body,
	height:702,
	monitorResize:true,
	style:'text-align:center',
	border:true,
	cls:'border3px',
	items:[{
		region:'north',
		html:'north',
		border:false,
		height:115
	},
		westMenu,
	{
	   id:'centerPanel',
		title:'ITSM向导',
		minSize: 640,
		padding:'10',
		cls:'align_left',
		autoScroll:true,
		buttons:[{text:'按钮',handler:function(){addwestMenu();}}],
		html:'<div id="centerDiv" style="width:100%;height:100%;">center</div>',
		region:'center'
	},
	  eastInfo,
	{
		region:'south',
		border:false,
		frame:false,
		cls:'white_backgroud',
		html:'<table cellSpacing="0" cellPadding="0" style="width:100%; height:100%; text-align:center" border="0"><tr><td style="font-size:12px; width:100%; height:100%; text-align:center">推荐IE版本为6.0,分辨率:1024*768,否则您将无法正常使用所有功能</td></tr><tr><td style="font-size:12px; width:100%; height:100%; text-align:center">包子大叔 版权所有</td></tr><tr align="center"><td style="font-size:12px; width:100%; height:100%; text-align:center">报障电话：<font color="red">123123123123</font></td></tr></table>',
		height:55
	}]
});


}Ext.onReady(fn);
</script>
</head>
<body>
</body>
</html>

包达叔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ext_panel4border

[code="java"].infotd{border-bottom:#B3CAFB dashed 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.x-panel-header {line-height:15px;}function fn(){//菜单部分va...
复制链接

扫一扫