Ext_panel_collapse_收缩

zheyiw

浏览: 999872 次
性别:
来自: 广州

最近访客更多访客>>

jklwan

devcang

weblxw

daikainan

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

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,
	id:'westmenu_o',
	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(){if (eastInfo.collapsed) {eastInfo.expand(); }else{eastInfo.collapse();} }}], //收缩east区域
		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
	}]
});

eastInfo.collapse();    //自动收缩

//console.dir(eastInfo);

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

分享到：