Ext_panel_collapse_收缩 EXTIEHTML
程序员文章站
2022-04-02 22:05:34
...
<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> 上一篇： 段侃男女,笑点多多哦
下一篇： 清空附件内容的方法 Java