Question

关于他们的主题生成器的当前Sencha文档非常有限，它仅涵盖文件基本结构和语法（包括渐变和函数）：

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

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

我尝试的第一件事就是查看文件themebuilder \ examples \ skeleton-config \ skeleton-config.theme，它应该具有＆＃34;所有必需的属性＆＃34;，但我找不到任何＆＃34;的ContentPanel＆＃34;在它。

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

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

在这种情况下，它很简单，因为有一个Info类匹配＆＃34; info＆＃34;主题中使用的元素。

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

.CS-COM-例如客户端基面板的Css3HeaderAppearance-Css3HeaderStyle-HEADERTEXT

通过查看这个类名，我认为.theme文件中使用的元素名称将是＆＃34; panel＆＃34;并且属性名称将是＆＃34; headerText＆＃34;，但遗憾的是检查文件skeleton-config.theme我看到面板元素中没有headerText属性。

我在其他元素中找到了headerText，比如datePicker，errortip，info和tip，所以面板没有它很有趣。

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（）映射到＆＃34;详细信息＆＃34; .theme文件中的元素

theme（）。panel（）映射到details.panel或

details {
    panel {

所以我必须使用的配置是panel元素中的font属性。

这回答了我的第一个问题，但它没有说明＆＃34;面板＆＃34;所有小部件的影响。 .theme文件中的元素。

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

1 个答案: