Basic Theme for Ext JS 4

Basic theme is designed to enhance standard gray Ext JS theme. It features gray body with subtle shadows and gradients appropriate for any business application. Colored ui-styles can be applied to highlight main application elements and corporate colors. Basic theme looks the best in medium size and doesn't hurt your eyes after hours of work.

Colorful Application Components

Basic offers five predefined ui colors. Besides that, Basic allows you to create a custom ui styles matching corporate colors of your company.

Three Theme Sizes

Basic gives the possibility of changing dimensions of application components. There are three different sizes to choose from- normal, medium and large.
To make your application work in medium or large mode, simply include css files from resources/css/basic-light-medium/ or resources/css/basic-light-large/ folders, instead of using same files from resources/css/basic-light/ folder.

UI styles

Basic theme contains 25 distinctive ui styles that can be used within the same application. It offers 5 predefined ui colors- blue, red, orange, green and black. Following table shows widgets to which ui styles can be applied and components that inherit applied color.

Widget Applicable to (xtype) Components that inherit base color


Window window none
Tab Panel tabpanel grid
Button button none
Progress Bar progress bar none

UIs applied to different widgets are shown in the images below. More about ui application can be found in Getting Started section.

Panel ui style can also be applied to accordion items.

Two base colors

Basic for Ext JS 4 offers two base colors- light and dark.
If you want to change theme color to dark, include css files from resources/css/basic-dark/ folder, instead of same files from resources/css/basic-light/ folder.

Other Features

  • CSS optimized for performance
  • Custom icon design
  • Simple customization using SASS and Compass
  • Permissive license
  • Support for Ext JS 4.0.7, Ext JS 4.1.1, Ext JS 4.2.0, Ext JS 4.2.1, Ext JS 4.2.2 and Ext JS 4.2.3
  • Approved on Sencha Market

Licensing & Support

There are two flavors of the License:

Precompiled CSS files; Best for simple projects; No customization possible; Affordable price;
Full source code included; Fully customizable through SASS and Compass;

To complete licensing process, please visit our store. Once finished, you'll be able to download purchased product there.

We offer bug fixing support through email and issue regular theme updates on new Ext JS releases.