带有引导框架的 extjs

Question

我希望将 bootstrap 或 flatui 样式添加到我的 ExtJS 5 应用程序中。现在，我做了一些调查并尝试了一些事情

• 只在应用索引文件中直接包含引导 css 和 js 文件。这不能很好地工作，因为 extjs 默认样式似乎覆盖了引导样式。而且，煎茶按钮和其他组件的创建方式有多个嵌套，因此即使引导样式没有被覆盖，它仍然无法正常工作。

• 从 extjs 4 中选择 extjs-bootstrap-theme 并将其调整为 5。唯一的问题是，它将具有非常有限的引导样式，因为这是作为 sencha 主题构建的。

有人有这方面的经验吗？最好的方法是什么？谢谢

Answer 1

如果你使用 ExtJS，你应该接受 ExtJS 主题系统和指南。

根据他们的说法，最好的方法是从 ext-theme-crisp 或 ext-theme-neptune 派生一个新主题，为此您覆盖记录的 CSS 变量并创建一个新图标集以使新主题与 bootstrap/flatui 的外观相匹配越远越好。只有这样，当这结束并且仍然需要更改时，您才能添加 JS 代码或自定义 CSS。

虽然 ExtJS 有超过 500 个 CSS 变量，但我猜你必须在 20 到 100 个之间进行更改才能使其匹配得非常紧密。

您应该从Global_CSS 中最一般的变量开始，例如$base-color，然后再进行更详细的变量，这些变量通常源自一般变量。因此，在最好的情况下，您可以跳过其中的 100 个，因为您已经将 $base-color 更改为正确的值。