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:
override : ‘Ext.panel.Panel’
//the override: by default, all panels will have a 200px width
width : 200
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.
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
Let’s define the class:
This class will override from
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:
override : ‘Ext.window.Window’
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:
The beforeshow listener will create a new animation (
Ext.fx.Anim), so first you have to require the animation in your class:
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:
target: mywindow, //argument of the beforeshow event
duration: 1000, //ms
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):
Confirm your code looks like this:
override : ‘Ext.window.Window’,
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
@include single-transition(opacity, 1000ms);
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
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.