CODEWITHSUNDEEP
extjsthemesextjs4.2
CD..
CD..

Reputation: 74156

ExtJs 4.2 compiling theme using compass

According to Sencha's documentation creating and compiling new themes should be done using Sencha CMD.

I'd like to create a new theme (which will inherit from an existing one) and to be able to compile it using Compass without Sencha CMD.

Any idea how to do so?

Upvotes: 1

Views: 6737

Answers (2)

pllee
pllee

Reputation: 3959

We have had theming in our application for last Ext 4 was released without the sencha command tool. Keep in mind this is 4.1 code and it may have have changed since 4.2. You need to have ruby/compass installed and create a config file for compass that will tell it to load ext specific variables and you can set compass configuration variables. http://compass-style.org/help/tutorials/configuration-reference/

Here is a sample config file named config.rb (I think it needs to be named config.rb but don't quote me.) This is taken from extDir/resources/sass

# $ext_path: This should be the path of where the ExtJS SDK is installed
# Generally this will be in a lib/extjs folder in your applications root
# <root>/lib/extjs
$ext_path = "../extjs/4.1"

# sass_path: the directory your Sass files are in. THIS file should also be in the Sass folder
sass_path = File.dirname(__FILE__)

# css_path: the directory you want your CSS files to be.
# Generally this is a folder in the parent directory of your Sass files
css_path = File.join(sass_path, "css")

# We need to load in the Ext4 themes folder, which includes all it's default styling, images, variables and mixins
load File.join(File.dirname(__FILE__), $ext_path, 'resources', 'themes')

#Compass config variable
relative_assets = true

Here is the dir structure

  • sass/config.rb
  • sass/redTheme.sass
  • sass/css

The redTheme.sass might look something like:

$base-color: red;

@import 'compass';
@import 'ext4/default/all';

After a compass compile in the sass directory it will create redTheme.css

  • sass/css/redTheme.css

Upvotes: 0

Alex Tokarev
Alex Tokarev

Reputation: 4861

If you want to create a new theme from scratch, that would be a bit overwhelming probably and I'd recommend trying to extend an existing theme first. Basically, a theme consists of two large parts: CSS templates and JavaScript overrides; CSS in turn is split between SASS code, mixins and variables.

There's the Theming guide that discuss theme building for 4.2; for inheritance examples you can take a look at existing themes: e.g., gray theme which extends classic theme, which in turn inherits from neutral theme, which has base theme as a parent. Neptune can give you lots of JavaScript override examples, too.

Upvotes: 1

Related Questions