Creating Theme-Specific Overrides in Ext JS

Posted on in CSS Ext JS Sass Sencha

Ext JS provides a number of functions that make it simple to create and work with classes. It also provides a series of functions to extend or override existing JavaScript classes. This means you can add behaviors and create your own classes, or override the behavior of some functions. In this article, we will show you how to use theme-specific class overrides.

You probably already know how to create an Ext JS class override. For example, you might want to change default behavior or patch the framework. In that case, you would create the class override using this code:

Ext.define('SomeClassName', {
    override : 'Ext.panel.Panel'
 
    //the override: by default, all panels will have a 200px width
    width : 200 
});

The first questions that come up are: what do you name this override class and where do you put it. You may be creating a class override that is specific to a theme. Wouldn’t it be nice, to have this JavaScript override bundled together with your custom theme? For example, in your custom theme, all panels should have a box-shadow. Or perhaps, you created an awesome CSS3 animation that will be visible any time you open a popup window. Unfortunately, the old versions of Internet Explorer can’t handle CSS3, so you might want to write a JavaScript fallback. In both cases, the default functionality change is visual. So, where in your file structure can you create these overrides, so they don’t break any other themes?

The trick is the overrides folder. With Sencha Cmd 3.1, it’s possible for applications and packages to save class overrides in the overrides folder. By default, when you generate a (theme) package, it already contains such a folder, and it has been set up to support overrides.

Let’s create a JavaScript fallback. For a simple animation, we will animate the opacity when opening a popup window.

Create the following file structure in your theme package, (let’s assume the name of this package is called: MyTheme ):

packages
> MyTheme
> > overrides
> > > window
> > > > Window.js

This file structure maps to the file structure of the framework for Ext.window.Window.

Let’s define the class:

Ext.define('MyTheme.window.Window', {
 
});

This class will override from Ext.window.Window:

Ext.define('MyTheme.window.Window', {
    override : 'Ext.window.Window'
 
});

Let’s test if this override works. First, run this from the command-line:

sencha app refresh

At this point, the previous code won’t change any functionality yet. Let’s output a console log as soon as the class is created, and test it in a browser:

Ext.define('MyTheme.window.Window', {
    override : 'Ext.window.Window'
 
}, function(){
    console.log("Oh yes, my override works!");
});

Let’s create the custom behavior. This override will add an animation on the beforeshow listener of a window:

listeners: {
    beforeshow: function(mywindow){
 
    }
}

The beforeshow listener will create a new animation (Ext.fx.Anim), so first you have to require the animation in your class:

requires: ['Ext.fx.Anim'],

Next, you include the code for creating the animation in the beforeshow event. For now, we will create a very simple animation, which changes the opacity to smoothly display the window (mywindow) from hidden to 100% visibility:

Ext.create('Ext.fx.Anim', {
    target: mywindow, //argument of the beforeshow event
    duration: 1000, //ms
    from: {
        opacity: 0
    },
    to: {
        opacity: 1
    }
});

Now, you can test if the animation works.

To top it off, let’s create a nice CSS3 animation for the modern browsers as well. We will wrap the Ext JS animation into a check that will only execute when the browser is an old version of Internet Explorer (IE9 or lower):

if(Ext.isIE9m) {
 
}

Confirm your code looks like this:

Ext.define('MyTheme.window.Window', {
    override : 'Ext.window.Window',
 
    requires: ['Ext.fx.Anim'],
    closeAction: 'hide',
    listeners: {
        beforeshow: function(mywindow){
 
            if(Ext.isIE9m) {
                Ext.create('Ext.fx.Anim', {
                    target: mywindow,
                    duration: 1000,
                    from: {
                        opacity: 0
                    },
                    to: {
                        opacity: 1
                    }
                }); 
            }
        }
    }
});

The only thing that is missing is the Sass code for the CSS3 animation. We will use Compass for that.

In the theme package, we can add the following Sass code to packages/MyTheme/sass/src/window/Window.scss. The code below shows the same animation that we coded in the JavaScript file:

@import "compass/css3/transition";
 
.x-window.x-hide-offsets {
    @include opacity(0);
}
 
.x-window {
    @include single-transition(opacity, 1000ms);
    @include opacity(1);
}

You will need to compile the Sass stylesheet to production-ready CSS code. Since this is included in Sencha Cmd and the Sencha build process, the Sass stylesheet will be automatically compiled when building the application with Sencha Cmd.

For now, we don’t need to build the whole application, we just want to quickly test the animation and only compile the stylesheet. You can achieve this by running one of the following commands from the command-line:

sencha ant sass

or

sencha app watch

The first command runs the Apache Ant task to compile the Sass once. The second command is more powerful, but it requires you to download and install Java Development Kit 7. You can compare sencha app watch with the Compass command: compass watch. Sencha Cmd watches the app and every time you hit save, Sencha Cmd builds your app and compiles your Sass Stylesheets. When changes are detected, only the minimum amount of work necessary is performed to bring your app and its CSS up to date, saving you from rebuilding your Sass.

Voila — the animation works in old and new browsers.

If you’d like to learn more about this and many other advanced Ext JS theming techniques, take our Advanced Theming Ext JS course. Check out http://www.sencha.com/training/ to join one of the Theme331 Advanced Theming classes located around the world or join an online class.

Generate a theme with Sencha CMD

Posted on in Environment Ext JS Sass Sencha Sencha Touch

This guide will teach you how to generate a Sencha Theme with Sencha CMD, to start theming with SASS.

Prerequisites

  1. Make sure you have Sencha CMD installed. If you don't have Sencha CMD installed: See this blog post.
  2. Make sure you have SASS/Compass/Ruby installed. No? Check this blog post.

All applications start with a "default" theme. To create new themes, you can easily generate themes with Sencha CMD.

Generate your theme

  1. Navigate to your project with your console/terminal and type the following command:
    sencha generate theme MyThemeName
    This will generate for you the following folders:
    • [project]/resources/sass/MyThemeName
    • [project]/resources/theme/MyThemeName
    • [project]/resources/css/MyThemeName (after compiling the SASS file)

  2. After generating the theme, [project]/resources/sass/MyThemeName/config.rb is generated with the correct paths to all theme folders.
  3. From here you can start editing your SASS file.
  4. The next step is to build the image slices needed for IE browsers.

    This is done with the following command:

    sencha theme build MyThmeName

    This will slice all the images in the CSS folder. This approach reduces the size of the CSS file since all image paths are relative to the CSS file location.

  5. You can preview your theme in your browser: [project]/resources/theme/MyThemeName/theme.html

Do you want to know more about theming Sencha with SASS? Check this blog post.

Read more info about Theming with Sencha CMD? Check: http://docs.sencha.com/ext-js/4-1/#!/guide/command_theme

Create an amazing Sencha Touch theme with SASS

Posted on in CSS Sass Sencha Touch

This tutorial shows you how to build an amazing Sencha Touch 2.1 theme: Like this one.

Prerequisites:
generate your application with Sencha CMD, so you have the MVC folder structure:
[project]
- app
- - model
- - store
- - view
- - profile
- - controller
- resources
- - css
- - sass

  1. Open [project] /resources/ folder
  2. Create the following (new) folders:

- default
- spidey
- - sass
- - css
- - fonts
- - images

Download the zip file below. It contains the full theme including all the asets:
Spidey Theme.

Copy all the assets over from my attached zip; incase your default assets have no subfolder default, copy the original sass, css... folders
over to default. Note for fonts, you will need a fontface kit: .eot, svg, .ttf, .woff)

  1. Create 2 new files in the resources/spidey/sass/ folder: spidey.scss and config.rb
  2. Change the content of the config.rb file to:
# Get the directory that this configuration file exists in
dir = File.dirname(__FILE__)

# Load the sencha-touch framework automatically.
load File.join(dir, '..', '..', '..', 'touch', 'resources', 'themes')

# Compass configurations
sass_path = dir

# Require any additional compass plugins here.
relative_assets = true

fonts_path = File.join(dir, "..", "fonts")
images_path = File.join(dir, "..", "images")
css_path = File.join(dir, "..", "css")

#output settings
output_style = :compressed
environment = :production

Actually what we are doing in this config file, is setting the paths to all your Sencha Touch framework folder and relative paths to your asset folders and CSS folder.
Last but not least there are some settings, to setup the production output of the generated CSS file. In this case the code will be minified.

  1. Incase you changed the folder structure of the default style files, you will need to make sure that it's pointing to the framework folder.
    Since now you are one extra level deep, you will need the sencha-touch framework dir:
load File.join(dir, '..', '..', '..', 'touch', 'resources', 'themes')

Read more on the next page about how to setup your SASS file.

Installing SASS + Compass for Windows & OS X

Posted on in CSS Sass

I'm getting a lot of hits on this topic, on my old blog; and since I will close this blog down soon; I will copy over the content, to host it here...

Sass = Awesome.
It stands for Syntactically Awesome Stylesheets.
Basically it's CSS on Redbull. Or CSS but with tricks.
It’s an extension on CSS3 and you will also use Compass. (that’s a SASS framework that streamlines the creation of css)

You will need a .scss file and you can compile this to production ready css.

It's very easy to install Sass and Compass on your Mac. Sass is included with HAML.
To get Sass working, you'll need an installation of Ruby. On your Mac this is already done.

On your Windows environment, you'll need to install Ruby via the installer:
http://rubyinstaller.org/about/contributors/
(Make sure you will at Ruby to your class path!)

After running the setup open the commandline: (Windows run > type: CMD)
Check if ruby is installed, navigate to the Ruby bin folder, and type:

ruby -v

If you receive a prompt with the installed version number of Ruby back, then the installation went good.
You can go further...

Now type in your console the following commando's:

sudo gem install haml
sudo gem install haml-edge
sudo gem install compass

(on Windows machine it's almost the same but without the sudo command.)

check if compass is running:

compass -v

Now you can write your SASS (.scss) file.
Create in an editor style.scss or even better: start a compass project:

compass create projectname

This will create:
- A desktop stylesheet
- Print stylesheet
- A configuration file: config.rb

Interested in BluePrint? A framework for implementing CSS3?
http://www.blueprintcss.org
It will automatically deploy together with the above project files. Use this command:

compass create projectname --using blueprint/basic

To convert your SASS (development) file back to .css (production ready code) just type in your console:

sass --watch style.scss:style.css

Or to watch the whole folder:

compass watch . 

And on windows:

C:Rubybin> sass -trace D:Sassdefault.scss:D:Sassdefault.css

Or to watch the whole folder:

compass watch . 

For more info's check these links:
http://sass-lang.com/
http://compass-style.org