ExtJS Theme Centralization

2
votes

I have multiple ExtJS apps based on a custom theme say "my-ux-theme" (extension of "ext-theme-crisp").

I have bunch of .SCSS files repeated in each one of the apps. Every time I make any change to the theme, I have to make change in each of the SCSS files across the apps.

I want to centralize my theme

I am planning to attach "my-ux-theme" to the KitchenSink application and then I am building the entire KitchenSink which produces the .CSS files I need. I then deploy this CSS to my CDN and linking all my apps to this theme (CSS files). Is this a good approach?

Is this a safe assumption that KitchenSink is a big app covering all the components in ExtJS and is generating all the CSS I would ever need?

Can you all please suggest?

The basic question is when we do Sencha Command on an ExtJS application (sencha app build) then the generated CSS files by the theme covers only those components which are used/present in the application? Or it doesn't matter?

1
extjscmdcommandthemes
Have you tried using packages ? – JChap
I agree that's one way to go. What if I don't want to do build a package (theme package) for each of my app? – Jagpreet Singh
You can create one package outside and put that in local repo, which can be accessed by all of your applications, this way you don't need to make changes in all your applications. – JChap
but I would still need to build right? I want to use CDN for the theme. – Jagpreet Singh
To answer your question, Sencha only Picks SCSS files for the components that are used in the application. – JChap

1 Answers

4
votes

Using Kitchen Sink does not feel right to me, Here is what you can do.

  • Create a Sencha Work Space
  • Create a Theme Package
  • Build the Theme Package using "sencha package build"
  • It will generate one single CSS file for your theme in build/resource/theme-name-all.css

Here are commands for it

sencha -sdk {path/to/Ext-JS-5-SDK} generate workspace my-workspace
sencha generate package -type theme my-custom-theme
sencha package build