`
yejian235
  • 浏览: 22847 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

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

阅读更多

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

对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. }
解决办法2:
将有tbar的panel装入(意思就是layout:'fit')没有设置frame或者frame设置为false的panel中。强烈推荐这种方法。

 

分享到:
评论

相关推荐

    Ext.DataView 图片列表显示

    new Ext.Panel({ layout: 'fit', items : dataview, height: document.body.clientHeight, width: document.body.clientWidth, title: myTitle, bbar:pagebar, tbar : myTbar, renderTo: 'imageList' });

    ext 列表页面关于多行查询的办法

    首先在Ext.grid.GridPanel中必须要有tbar对象 然后要增加listeners: { ‘render’: function() { bbar2.render(this.tbar); //add one tbar //twoTbar.render(this.tbar); //add two tbar // threeTbar.render(this....

    ToolbarKeyMap.js tbar或按钮绑定的快捷键

    可绑定tbar ,按钮简单方便new Ext.ux.ToolbarKeyMap() keyBinding : { key :key, ctrl:true }即可

    EXTJS创建提示框、面板、表格建议代码实现

    var p=new Ext.Panel({ title:'测试面板', collapsible:true, renderTo:'base',//被渲染的对象,渲染的对象必须是ID width:400, html:'<b>内容</b>> <a>test</a>', tbar:[ {text:'新增'},{text:'修改'},...

    Extjs 3.3切换tab隐藏相应工具栏出现空白解决

    不废话,上代码,代码如下: 代码如下: //隐藏 Ext.getCmp(‘Tab2’).tbar.hide(); Ext.getCmp(‘Tab2’).tbar.dom.style.height = ‘0px’; //显示 Ext.getCmp(‘Tab2’).tbar.show(); Ext.getCmp(‘Tab2′).tbar....

    extjs两个tbar问题探讨

    版本:extjs3.4 接触过extjs的同志们都知道每个panel都有一个tbar(top bar 上面工具栏) ,bbar(bottom bar 底部工具栏) 大家做查询页面,一般都是啥样子的? 最基本的是一个table,来显示数据。 再进一步: 添加对...

    tbar97.zip_工具栏

    制作的一个类似Office97的工具栏,除了不能移动外,其他都极为相似

    windows_7_theme_for_windows_10_v2_by_win7tbar-dbgf3h7.zip

    Windows 7 Theme for Windows 10 V2, Compatible for Windows 10.14393 (Anniversary Update), and Windows 10.15063 ...@see http://win7tbar.deviantart.com/art/Windows-7-Theme-for-Windows-10-V2-692706139

    extjs中form与grid交互数据(record)的方法

    首先在grid的tbar中定义编辑按钮:Js代码 代码如下:id:’editDataButton’, text:’编辑’, tooltip:’编辑’, iconCls:’edit’, handler: function(){ showeditPanel();} 再定义form: Js代码 代码如下:var ...

    VB中使用位图作为TootBar控件和菜单的背景(非Subclass)

    本代码演示如何使用资源文件或位图文件改变工具条和应用系统菜单的背景,从而使用能做出非常漂亮的用户界面

    论文研究 - 4-羟基壬醛(HNE),快餐店和杂货店的炸鸡中的有毒醛

    分析样品的总脂肪,脂肪酸分布,与硫代巴比妥酸(TBAR)的反应性,测量二级脂质过氧化产物,例如醛,酮和相关的羰基化合物。 使用高效液相色谱(HPLC)分析样品的HNE(一种有毒的醛)。 与乳房和大腿皮肤相比,在...

    StrongOD v0.2.6

    2,Cmdbar和TBAR插件兼容 [2009.08.24 v0.2.6.405] 1,全面支持win7(7600以下版本不支持) 2,增强解析PE的稳定性 3,修复tmd壳某些时候attach上去无法下断点的漏洞 [2009.06.16 v0.2.5.388] 1,增加ring0稳定性 2...

    VB编程资源大全(源码 控制)

    本程序演示把 .bar 文件与 NotePad建立关联(3KB) 40,tbar97.zip 制作的一个类似Office97的工具栏,除了不能移动外,其他都极为相似!(24KB) 41,combomagic.zip 在 COMBO 中的增量查询(3KB) 42,...

    如何使用VB实现打印预览

    Stp = PrnPrn.tBar.Width / ((eP - sP) + 1) PrnPrn.pBar.Width = Stp * aP End Sub Function TempFileExists(MyFilename As String) As Boolean Dim TempAttr As Double TempFileExists = True On Error ...

    JQuery EasyUI 加载两次url的原因分析及解决方案

    1、传统方式 $(function () { var url = ../Source/Query/jhDataQry.ashx?action=query;...table id=DataGrid class=easyui-datagrid fit=true border=false toolbar=#TBar pagination=true data-opt

    d3-dsv:分隔符分隔值(例如CSV和TSV)的解析器和格式化程序

    d3-dsv 此模块为分隔符分隔的值(最... tsvParse ( "foo\tbar\n1\t2" ) ; // [{foo: "1", bar: "2"}, columns: ["foo", "bar"]] 或格式化: d3 . csvFormat ( [ { foo : "1" , bar : "2" } ] ) ; // "foo,bar\n1,2

    京东首页静态模板

    <div class="jdm-toolbar-panels J-panel"> </div> <div class="jdm-toolbar-tabs J-tab"> <div data-type="bar" class="J-trigger jdm-toolbar-tab jdm-tbar-tab-cart"> <i class="tab-ico"></i> 购物车 ...

    extjs3 增删

    gridpanel中添加删除tbar,添加是弹出一个form,进行添加到一个gridpanel中

Global site tag (gtag.js) - Google Analytics