div水平居中,让Ext Grid自适应浏览器宽度

      今天搞了我差不多一个下午,就解决div水平居中,并让页面自适应浏览器宽度。Ie浏览器真是搞死人,ff/google浏览器都很好调试,就ie好不容易才出来效果。呵呵!这图片终于派上用场了


下面是ie下水平居中样式,且只适用于ie,其它浏览器没反应。

 

 

<style type="text/css">

.divboxcenter{text-align:center;display:table-cell; border:0px solid red}

 </style> 

 

页面代码:

<body > <center> <!--此处是ff或其它浏览器居中 --> <div class="divboxcenter"> <!--这个用于解决ie居中问题 --> <table width="95%" border="0" bordercolor="#CFDDF0" cellpadding="0" cellspacing="0" > <tr> <td colspan="2"><div id="tpanel"></td> </tr> <tr> <td colspan="2" > <div id="myMenu"></div></td> </tr> <tr > <td><div id="leftPanel"/></td> <td><div id="rightPanel"/></td> </tr> <tr> <td colspan="2" ><div id='bTbar'></td> </tr> </table> </div> </center> </body>

 

 

1、开始时设置初始大小,需在gridrender之后,设置 grid.setWidth();

   var dataIn ={}; var tempwidth = document.body.clientWidth-50; //留2边一点空白 if(952 > tempwidth){ //952为设置的最小页面宽度,即:1024 x 768 dataIn.width = 952; //浏览器最小值为952,当小于此值时会出现横滚动条 tempwidth = 952; }else{ dataIn.width = tempwidth; } rtObjGlobal.initGridWidth = tempwidth - 200; //200为页面左边panel的宽度,得到Grid的初始宽度

2、页面的自适应:

Ext.EventManager.onWindowResize( function(w,h){ var gridWidthValue = 0; var tempwidth = w -50; if(tempwidth < 952){ tempwidth = 952; } gridWidthValue = tempwidth - 200; var myMenu_id = Ext.getCmp("myMenu_id") var bToolbar = Ext.getCmp("bToolbar") if(rtObjGlobal.rtObj_panelRight){ rtObjGlobal.rtObj_panelRight.prop.grid.setWidth(gridWidthValue); } myMenu_id.setWidth(tempwidth); bToolbar.setWidth(tempwidth); topPanel.setWidth(tempwidth); } );

你可能感兴趣的:(浏览器,function,ext,IE,div,border)