A Material Design theme for Ext JS which provides styles and custom components that follow Google's Material Design guideline.
Switch branches/tags
Nothing to show
Clone or download


Material Design theme for Ext JS

A theme package for Ext JS that provides styles and custom components that follow Google's Material Design guideline.

Status (May 2, 2015)

This theme package was created for my talk on April 8, 2015 at SenchaCon 2015. The slides for my talk can be found here.
The theme package is far from being a complete Ext JS theme package, it's just a start. In the future I plan to provide a more detailed overview of what Material Design components are included in the theme and which ones are still pending.


The theme package and example application was created with Ext JS 5.1.0. My plan is to upgrade the package and example application to Ext JS 6.0.0 modern toolkit before continuing developing it.
As people have asked me: Even though I work for Sencha, this theme is purely a side project and not an official theme from Sencha.


Conference Manager


In order to use this theme package, check it out into your app's or workspace's packages folder. Make sure to use Ext JS 5.1.0. If you just want to run the example locally, you can create an empty workspace and put the "theme-material" package in your workspace's packages folder. The conference manager example application also requires the "scaffold" package which I created with this application so you need to put that one into your workspace's packages folder as well.

Here's how you create an empty workspace:

sencha -sdk /path/to/ext-5.1.0 generate workspace /path/to/workspace

Once you have everything checked out, you need to run sencha app build development in the theme-material/examples/conference-manager folder. You should then be able to open the conference manager app on your machine.


As mentioned above, the current theme package's and example application's state is just a start. There are many rough edges in the example application and many styles and components missing in the theme package.
Over time I'll add issues that I know of to the repository's issue tracker. You're welcome to add issues and questions to the issues tracker as well.

Why is the package called "theme-material" and not "material-theme"?

It's called "theme-material" not only to make Yoda happy, but also to follow Sencha's naming convention for theme packages.


As people already offered to contribute, I'm happy to take pull requests.


If you have any questions, best is to create an issue in the repository's issue tracker. You can also write me on Twitter.