css - 如何找到 .theme 文件中的哪些属性用于在 GXT3 中生成给定的 CSS 类？

Question

当前关于 Theme Builder 的 Sencha 文档非常有限，它只涵盖了文件的基本结构和语法(包括渐变和函数):

http://docs.sencha.com/gxt/3.1/ui/theme/syntax/ThemeBuilderSyntax.html

我的问题是我应该在 .theme 文件中设置哪个属性才能影响特定的 CSS 类？例如，ContentPanel 标题中使用的字体。

我尝试的第一件事是查看文件 themebuilder\examples\skeleton-config\skeleton-config.theme，它应该具有“所有必需的属性”，但我在其中找不到任何“contentPanel” .

这是他们在文档中的示例:

details {
  info {
    messageText = defaultFont
    //note that this could also be written as
    //messageText = theme.defaultFont
  }
}

在这种情况下它很简单，因为有一个 Info 类与主题中使用的“信息”元素相匹配。

然后我查看了生成的 HTML 并在我的 ContentPanel 的标题中找到了这个 CSS 类名:

.CS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerText

通过查看此类名称，我认为在 .theme 文件中使用的元素名称将是“panel”，属性名称将是“headerText”，但不幸的是检查了我在那里看到的文件 skeleton-config.theme面板元素中没有 headerText 属性。

我在 datePicker、errortip、info 和 tip 等其他元素中发现了 headerText，所以有趣的是面板没有它。

Answer 1

我发现要准确了解必须设置哪个配置参数才能影响特定 CSS 的方法是查看 GWT 生成的类。

我首先检查生成的 HTML，然后我找到了 CSS 类名:

.CS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerText

然后我在目录 target/.generated 中搜索这个字符串(我使用的是 Maven)并找到了类 Css3HeaderAppearance_Css3HeaderResources_default_InlineClientBundleGenerator.java ，其中该字符串多次出现:

".CS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerText {\n  right : " + ("20px")  + ";\n}\n" +
".CS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerText {\n  font-family : " + ("tahoma"+ ","+ " " +"arial"+ ","+ " " +"verdana"+ ","+ " " +"sans-serif")  + ";\n  font-size : " + ("11px")  + ";\n  font-weight : " + ("bold")  + ";\n  line-height : " + ("15px")  + ";\n  color : ") + ((theme().panel().font().color() + "")  + ";\n  font-size : " + (theme().panel().font().size() + "")  + ";\n  font-weight : " + (theme().panel().font().weight() + "")  + ";\n  font-family : " + (theme().panel().font().family() + "")  + ";\n  line-height : " + ("15px")  + ";\n  text-transform : " + ("none")  + ";\n}\n.PR-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerBar {\n  float : " + ("left")  + ";\n}\n/* CssDef */\n/* CssDef */\n/* CssDef */\n/* CssDef */\n")) : ((".OR-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-header {\n  padding : " + ("4px"+ " " +"3px"+ " " +"2px"+ " " +"5px")  + ";\n  position : " + ("relative")  + ";\n  padding : " + ("0")  + ";\n}\n.BS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerIcon {\n  float : " + ("left")  + ";\n}\n.AS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerHasIcon .BS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerIcon {\n  width : " + ("18px")  + ";\n}\n.AS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerHasIcon " +
".CS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerText {\n  left : " + ("20px")  + ";\n}\n" +
".CS-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerText {\n  font-family : " + ("tahoma"+ ","+ " " +"arial"+ ","+ " " +"verdana"+ ","+ " " +
"sans-serif")  + ";\n  font-size : " + ("11px")  + ";\n  font-weight : " + ("bold")  + ";\n  line-height : " + ("15px")  +
";\n  color : ") + ((theme().panel().font().color() + "")  + ";\n  font-size : " + (theme().panel().font().size() + "")  + ";\n  " +
"font-weight : " + (theme().panel().font().weight() + "")  + ";\n  font-family : " + (theme().panel().font().family() + "")  + ";\n  line-height : " + ("15px")  + ";\n  text-transform : " + ("none")  + ";\n}\n.PR-com-example-client-base-panel-Css3HeaderAppearance-Css3HeaderStyle-headerBar {\n  float : " + ("right")  + ";\n}\n/* CssDef */\n/* CssDef */\n/* CssDef */\n/* CssDef */\n"));

我注意到它首先生成一些硬编码的 CSS 类，最后它根据调用 theme().* 返回的值生成一个 CSS 类。

最后，通过将这些调用与文件 skeleton-config.theme 的结构进行比较，我找到了问题的答案:

theme() 映射到.theme 文件中的“details”元素

theme().panel() 映射到 details.panel 或

details {
    panel {

所以我必须使用的配置是面板元素内的字体属性。

这回答了我的第一个问题，但它没有阐明受 .theme 文件中的“面板”元素影响的所有小部件。