修改 tbar 中的 Button 样式
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
ExtJS 中使用 ToolBar 时,如果在 ToolBar 中添加按钮,Button 的默认状态样式是不突出显示的,
但是在 Panel 中就会突出显示出来,那么如何让 ToolBar 中的 Button 也像在 Panel 中一样突出
显示呢?
可以在页面文件中添加如下一组 CSS 样式,然后将 ToolBar 的 ctCls 属性设置为 ‘my-toolbar'
就可以了~
.my-toolbar .x-toolbar .x-btn .x-btn-tl{ background-position: 0 0; }
.my-toolbar .x-toolbar .x-btn .x-btn-tr{ background-position: -3px 0; }
.my-toolbar .x-toolbar .x-btn .x-btn-tc{ background-position: 0 -6px; }
.my-toolbar .x-toolbar .x-btn .x-btn-ml{ background-position: 0px -24px; }
.my-toolbar .x-toolbar .x-btn .x-btn-mr{ background-position: -3px -24px; }
.my-toolbar .x-toolbar .x-btn .x-btn-mc{ background-position: 0 -1097px; }
.my-toolbar .x-toolbar .x-btn .x-btn-bl{ background-position: -6px -3px; }
.my-toolbar .x-toolbar .x-btn .x-btn-br{ background-position: -9px -3px; }
.my-toolbar .x-toolbar .x-btn .x-btn-bc{ background-position: 0 -18px; }
.my-toolbar .x-toolbar .x-btn-over .x-btn-tl{ background-position: -6px 0; }
.my-toolbar .x-toolbar .x-btn-over .x-btn-tr{ background-position: -9px 0; }
.my-toolbar .x-toolbar .x-btn-over .x-btn-tc{ background-position: 0 -9px; }
.my-toolbar .x-toolbar .x-btn-over .x-btn-ml{ background-position: -6px -24px; }
.my-toolbar .x-toolbar .x-btn-over .x-btn-mr{ background-position: -9px -24px; }
.my-toolbar .x-toolbar .x-btn-over .x-btn-mc{ background-position: 0 -2168px; }
.my-toolbar .x-toolbar .x-btn-over .x-btn-bl{ background-position: -6px -3px; }
.my-toolbar .x-toolbar .x-btn-over .x-btn-br{ background-position: -9px -3px; }
.my-toolbar .x-toolbar .x-btn-over .x-btn-bc{ background-position: 0 -18px; }