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