ExtJS控件样式的修改(示例无边框panel)

这里说的修改不是去改extjs本身的ext-all.css, 也不建议这样去做,这样会影响所有页面;而应该是用自定义的css去覆盖某些控件的默认样式。大部分控件都有类似cls、style的属性供开发者去定制样式;但具体要设置样式的哪些属性才能达到特定效果,api文档就没说了。比如要构建一个不带边框的panel,设置border、bodyborder属性是不行的,还是会有1px的边框。网上去搜就更难了,准备好万能的firebug,自己摸索吧。

        打开firebug,切换到html选项卡,找到panel对应的div节点,如下图:


 

panel控件的基准样式是x-panel,其中的border-style:solid就是设置边框的,将其覆盖为border-style:none就成无边框的了。

具体方法:定义无边框的样式.my-panel-no-border{border-style:none},然后定义panel时设置baseCls属性:

var mypanel = Ext.Panel({

  baseCls:'my-panel-no-border',

  //其他属性

});

没文档,搜又不好搜,只能用这种最土的方法了。类似的还有个需求,checkboxgroup里面的checkbox以列模式摆放时,各个checkbox是对齐的;现在需要

对checkbox缩进摆放,体现出一定的层次关系,就像树形列表一样。打开firebug,找checkbox的样式,加上什么padding之类的属性就行了。


发布了118 篇原创文章 · 获赞 36 · 访问量 76万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章