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

在将我们的ExtJS 3应用程序升级到ExtJS 4后，一些（但不是全部）组件的外观改变了。该应用程序使用三个CSS文件：最初的ext-all.css和两个自己写的文件，这些文件在很久以前就已经写好了。这两个文件似乎是产生并定义基于类的规则一样ExtJS 3到4迁移时保留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文件必须注意样式。

来源

2012-02-21 Steven

事实证明，主题是绝对正确的方式来做到这一点。我设法通过遵循此guide-to-custom-themes-in-extjs-4来恢复应用程序的最重要的样式。

不久，我遇到了this的bug并解决了它，把sass降级到3.1.1，就像它被提到here一样。

要恢复大部分的设计我不得不重新定义在以下变量的我-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;

正如你所看到的，应用程序的定制设计实际上是很简单。 :)

来源

2012-02-22 13:29:39 Steven

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

回答

相关问题