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 ...

Get Learning Ext JS - Fourth Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.