使用 CSS 设置 Sencha Touch 表单的样式 - 我如何找到元素？答案

【问题标题】：Using CSS to style a Sencha Touch form - how do I find the elements?使用 CSS 设置 Sencha Touch 表单的样式 - 我如何找到元素？
【发布时间】：2011-05-31 07:25:19
【问题描述】：

我从 Sencha Touch 开始，我对这个强大工具的 Javascript 元素有了相当不错的处理。不过最近接触到CSS部分，怕是不知道怎么准确设置样式。

我可以猜测其中的一些元素，并且我知道其他一些元素是因为我创造了它们。但我无法查看生成的源代码或检查 DOM，甚至无法使用 FireMobileSimulator 或一些此类插件。因此，例如，当我尝试设置表单元素的样式时，我发现我无法让标签和输入字段浮动，例如，我无法准确诊断它为什么不起作用。

有人知道吗？谢谢！ SS

【问题讨论】：

标签： css forms sencha-touch

【解决方案1】：

嘿风暴阴影。要编辑 Sencha 组件的样式，您应该学习 SASS，事实上，Sencha Touch 与新的 Ext 4 框架完全一样，使用 SASS 和 COMPASS 来创建主题，您也可以创建自己的主题。我知道一开始您可能会对使用这些新技术感到“害怕”，但我向您保证，您将能够通过编辑一个简单的变量来更改整个应用程序。但是，如果你想错过这个绝佳的机会，我建议你看看这个文件 “resources\themes\stylesheets\sencha-touch\default\widgets_form.scss” 在您的 Sencha Touch 根目录中，以了解组件是如何创建的以及如何将 CSS 类用于表单组件。然后你可以尝试通过修改 Sencha Touuch 主题 CSS 来编辑它们。

但我警告你：这不是 Sencha 的做法。如果你想成为一个优秀的 Sencha Touch 开发者，你必须学习 SASS。非常简单，值得学习！

希望这会有所帮助。

【讨论】：

谢谢安德里亚！我一点也不不愿意学习 SASS——事实上恰恰相反。但是，我正在使用公司管理的租赁服务器，服务器公司不会授予我安装二进制文件的必要权限。我向您保证，一旦我说服他们这项技术值得设置/租用更强大的服务器解决方案，机会就会被抓住。 ;-)

【解决方案2】：

你也可以使用less，而不是指南针来生成你的css（毕竟它只是CSS！）

LESS 可以在客户端或服务器端实现，因此您不必靠近 Ruby。

Less Website

【讨论】：

哇，看起来真的很有用。谢谢！肯定会尝试的。