读书人

ext.panel与tbar的间隙的解决方法

发布时间: 2012-10-07 17:28:51 作者: rapoo

ext.panel与tbar的间隙的解决办法

解决办法 1:网上转载http://blog.csdn.net/selley/archive/2008/10/29/3175126.aspx

对Ext的Panel界面组件,如果配置它的frame为true,则Panel是圆角框显示,但也会出现如下效果:


ext.panel与tbar的间隙的解决方法
如图,Panel的body在文字周围显示的是Panel的底色,这些间隙是css的padding引起的。
如果使用圆角,则Panel组件将使用?.x-panel-ml?.x-panel-mc?.x-panel-mr 这些样式,这些规定了padding值为6px如:
    .x-panel-ml{background:#fff?url(../images/default/panel/left-right.gif)?repeat-y?0?0;padding-left:6px;zoom:1;}
如果有页面使用圆角Panel,又不想padding太大,可以在页面中定义样式:
    .x-panel-ml{padding-left:6px;}
另外,如果使用column layout,则同一列的两个Panel可能挨着,可以使用如下样式,定义两个Panel之间的垂直间隔:
    .x-column-layout-ct?.x-panel?{
  1. ????????margin-bottom:5px;????}
定义圆角Panel的部分实例代码:
    {
  1. ?? ? columnWidth:.33,??? ? baseCls:'x-plain',
  2. ?? ? bodyStyle:'padding:5px?5?5px?5px',?? ? items:[{
  3. ?? ? ? ? ? ?title:?'Panel',????????????frame:true,
  4. ????????????bodyStyle:'background:white;font:normal?12px?verdana;',??????????? ? ? ? ? ?html:?Ext.example.shortBogusMarkup
  5. ?? ? ? ? ?}]
  6. }
解决办法2:将有tbar的panel装入(意思就是layout:'fit')没有设置frame或者frame设置为false的panel中。强烈推荐这种方法。

?

读书人网 >Web前端

热点推荐