ExtJS控件样式的修改
时间:2010-09-17 来源:csbird
这里说的修改不是去改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之类的属性就行了。
相关阅读 更多 +