extjs750 window标题工具按钮图标不显示异常处理
小编:管理员 462阅读 2022.09.07
版本
extjs7.x classic material主题
效果修正前,window标题中关闭图标可见,tools图标看不见
修正后,tools正常显示图标
原因检查元素发现图标样式继承了neutral主题.x-tool-tool-el样式的颜色,查阅源码可知material继承neutral主题却没有为window的tools定义样式
解决自定义样式
.#{$prefix}window { .#{$prefix}window-header { .#{$prefix}tool-tool-el { color: $base-color; } .#{$prefix}tool-close { color: $window-close-glyph-color; } } }复制源码
- neutral主题panel tool样式 node_modules/@sencha/ext-classic-theme-neutral/sass/src/panel/Tool.scss
.#{$prefix}tool-tool-el { overflow: hidden; width: $tool-size; height: $tool-size; margin: 0; color: $tool-glyph-color; // $tool-glyph-color: dynamic(#fff); text-align: center; @if $tool-opacity != 1 { @include opacity($tool-opacity); } @if $tool-opacity-over != 1 or $tool-opacity != 1 { .#{$prefix}tool-over & { @include opacity($tool-opacity-over); } } @if $tool-opacity-pressed != 1 or $tool-opacity != 1 { .#{$prefix}tool-pressed & { @include opacity($tool-opacity-pressed); } } }复制
- material主题windows样式 node_modules/@sencha/ext-classic-theme-material/sass/src/window/Window.scss
.#{$prefix}window { box-shadow: $toolbar-box-shadow; .#{$prefix}window-header { .#{$prefix}tool-close { color: $window-close-glyph-color; } } }复制
相关推荐
- ExtJs七(ExtJs Mvc创建ViewPort) 前言在4.1的时候,要先创建一个扩展于Ext.app.Application的类,然后用create创建它的实例来开始应用程序的。而在4.1.1,则可直接调用application方法开始执行应用程序,简化了。调用application方法,其参数是一个配置对象,主要配置项有以下三个:name:用来…
- 3DMAX提示和技巧 本主题标识使用 Civil View 的一些重要提示和技巧。常规使用屏幕分辨率至少为 1280x1024 的 Civil View。低于此分辨率时,一些面板将占用过多屏幕空间。 将视口设置为线框显示以达到最佳性能。 要尽可能简化用户界面,请在单个视口中工作并关闭 3ds Max 命令面…