O'Reilly logo

Learning Ext JS 4 by Armando Gonzalez, Crysfel Villa

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Different styles for the same component

It's very common to have different styles of buttons, windows, panels, or any other component. For example, in our application we can define a different style for the main top toolbar and different styles for the other toolbars that are inside the panels in our forms or anywhere else.

In such cases the ui property shines. Every widget defines a ui property, which contains a prefix for the CSS classes. This way we can define specific classes for every component. Let's modify our JavaScript code and define a ui property for our main toolbar. The main toolbar is defined in the Viewport class. Let's open that file and add the following code:

Ext.define('MyApp.view.Viewport',{ //... initComponent : function(){ ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required