ext_panel4border EXTIEHTML
程序员文章站
2022-04-02 23:41:12
...
<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>