ExtJS控件样式的修改

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

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

ExtJS控件样式的修改_第1张图片

 

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之类的属性就行了。

转载于:https://www.cnblogs.com/csbird/archive/2010/09/17/1829629.html

你可能感兴趣的:(ExtJS控件样式的修改)