ExtJS 3 到 4 迁移时保留 CSS 样式

发布于 2025-01-07 09:36:09 字数 686 浏览 3 评论 0原文

将我们的 ExtJS 3 应用程序升级到 ExtJS 4 后，一些（但不是全部）组件的外观发生了变化。该应用程序使用三个 CSS 文件：原始的 ext-all.css 和许多年前编写的两个自己的文件。这两个文件似乎是生成的并定义基于类的规则，例如

.x-menu-group-item .x-menu-item-icon {
  background-image: none;
}

.x-menu-plain {
  background-color: #fff !important;
}

.x-menu .x-date-picker {
  border-color: #AFAFAF;
}

要恢复应用程序的外观，我可以

从头开始重写自己的两个文件。
保留文件并为看起来奇怪的组件定义新规则。为此，我必须使用 Firebug 手动挑选它们，并猜测组件使用的众多 CSS 类中的哪些我必须重新设计样式。这应该需要几天的时间。
使用我还不知道的新主题支持来设计应用程序的样式。这应该是最后一个选择，因为它可能需要很长时间。我也不知道如何将现有的 CSS 文件导入到 SASS 中。

那么，像旧应用程序一样重新设计 ExtJS 4 应用程序的最佳方式是什么？

编辑：我不想通过应用“样式”参数在代码中编写 CSS。 CSS 文件必须处理样式。

原文

After upgrading our ExtJS 3 application to ExtJS 4 the appearance of some (but not all) components changed. That application uses three CSS files: the original ext-all.css and two own files written many moons ago. These two files seems to be generated and define class-based rules like

.x-menu-group-item .x-menu-item-icon {
  background-image: none;
}

.x-menu-plain {
  background-color: #fff !important;
}

.x-menu .x-date-picker {
  border-color: #AFAFAF;
}

To restore appearance of the application, I could

Rewrite the own two files from scratch.
Keep the files and define new rules for the odd looking components. To do that I have to hand-pick them with Firebug and guess which of the many CSS classes used by the component I have to restyle. That should take days.
Style the application with the new theming support which I don't know yet. That should be the last option because it could take too long. Also I don`t see how the existing CSS file can be imported in SASS.

So, what is the best way to restyle my ExtJS 4 application like the old one?

Edit: I don`t want to write CSS in the code by applying a "style" argument. The CSS files have to take care of styling.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

揽清风入怀 2025-01-14 09:36:09

事实证明，主题化是实现这一目标的绝对正确方法。我按照此 extjs-4 中的自定义主题指南。

很快我就遇到了这个 bug 并通过将 sass 降级到 3.1.1 来解决它，就像提到的那样此处。

要恢复大部分设计，我只需在 my-ext-theme.scss 中重新定义以下变量：

$grundblau: #b9d7ff;
$panelrandgrau: #D0D0D0;
$panelgrau: #f1f1f1;

$base-color: $grundblau;

$panel-border-color: $panelrandgrau;
$panel-frame-background-color: $panelgrau;
$panel-header-color: #333333;

如您所见，应用程序的自定义设计实际上非常简单。 :)

As it turns out, theming is the absolut right way to do this. I managed to restore the most important styles of the application by following this guide-to-custom-themes-in-extjs-4.

Soon I ran into this bug and solved it with downgrading sass to 3.1.1 like it was mentioned here.

To restore most of the design I just had to redefine the following variables in the my-ext-theme.scss:

$grundblau: #b9d7ff;
$panelrandgrau: #D0D0D0;
$panelgrau: #f1f1f1;

$base-color: $grundblau;

$panel-border-color: $panelrandgrau;
$panel-frame-background-color: $panelgrau;
$panel-header-color: #333333;

As you can see, the custom design of the application is actually pretty simple. :)

回复收藏 0 原文

~没有更多了~