Ext Panel:设置Frame属性为true

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


如图,Panel的body在文字周围显示的是Panel的底色,这些间隙是css的padding引起的。

如果使用圆角,则Panel组件将使用 .x-panel-ml .x-panel-mc .x-panel-mr 这些样式,这些规定了padding值为6px
如:
  1. .x-panel-ml{background:#fff url(../images/default/panel/left-right.gif) repeat-y 0 0;padding-left:6px;zoom:1;}
如果有页面使用圆角Panel,又不想padding太大,可以在页面中定义样式:
  1. .x-panel-ml{padding-left:6px;}
另外,如果使用column layout,则同一列的两个Panel可能挨着,可以使用如下样式,定义两个Panel之间的垂直间隔:

  1. .x-column-layout-ct .x-panel {
  2.         margin-bottom:5px;
  3.     }
定义圆角Panel的部分实例代码:
  1. {
  2.      columnWidth:.33, 
  3.      baseCls:'x-plain',
  4.      bodyStyle:'padding:5px 5 5px 5px',
  5.      items:[{
  6.             title: 'Panel',
  7.             frame:true,
  8.             bodyStyle:'background:white;font:normal 12px verdana;',         
  9.             html: Ext.example.shortBogusMarkup
  10.           }]
  11. }



  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值