Keeping CSS Styles while ExtJS 3 to 4 Migration

Question

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

1. Rewrite the own two files from scratch.
2. 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.
3. 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.

Answer 1

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. :)