Different styles for the same component
In an application, it's common to have different styles of buttons, windows, panels, and so on. For example, in our application, we can define different styles for a panel (according to the type of data we are going to show in there) and different styles for the toolbars inside panels, or for different types of buttons.
In this case, the ui property is essential for this kind of task. Every widget in Ext JS has a ui property, which contains prefixes for the CSS classes. In this way, we can define specific classes for every component. In the following exercise, we are going to create the dashboard for our application and give a custom ui property to each one of the panels inside the dashboard.
Our layout for the dashboard will be like this:
The idea is that we assign each panel a different style, so the Featured panel will be purple, the News panel will be dark blue, and finally Tips will be orange. Also, the title's text and the icons for the panel's...
