Latest Ext JS 7.8 is now available. Learn more

Announcing Sencha Themer 1.3.3 GA

August 30, 2018 160 Views
Show

We’re excited to announce the release of Sencha Themer 1.3.3, which supports theming for ExtReact 6.6 applications and components. This release supports the ExtReact applications generated using the new ExtReact application generator tooling.

Download Now

  • Existing Sencha Themer users: Within Sencha Themer, you will get a notification to upgrade Themer to version 1.3.3
  • Ext JS Pro, Premium, Enterprise and ExtReact Premium customers: Download Sencha Themer from the Support portal
  • Download Themer as part of a free 30-day trial with:

Note: Cmd 6.5.1 or higher is required for Themer 1.3.3

What’s New

ExtReact 6.6 Support

Themer 1.3.3 supports theming ExtReact 6.6 applications using the latest React 16.x framework and Web Pack 4 plugin. ExtReact components are themable without having to write any code, which is great for React developers. Material theme is popular amongst React developers and all ExtReact components have full support for Material theme. With Themer 1.3.3 you can style new modern components – Time Panel, Time Field, Gauges with needles and visually create uniquely themed components for your React application.

Theming ExtReact Components

Theming ExtReact Components

ExtReact Application Generator Support

Themer 1.3.3 supports theming applications created using the ExtReact Application Generator that you can install using the below command:

npm install -g  @sencha/ext-react-gen

You can specify Material, Triton, iOS or Neptune as the base theme while creating applications using the ExtReact Application Generator. For example, the below command creates a React application using the Triton theme:

ext-react-gen app --theme triton --name ThemerTritonApp

The ext-react-gen generator will ask if you’d like to include some example code in your app. If this is your first time using ExtReact, we suggest you include the example code so you can see how some of the more common components work.

You can use Themer to create a new theme by selecting the path to your ExtReact generated app in Themer. To add additional themes to your application, you will need to install corresponding theme packages in your application. For example, to add the Material theme package to an app that is currently using the Triton theme, use the following command:

npm i @sencha/ext-modern-theme-material  --save
Creating a New Theme and Styling React app with Themer

Creating a New Theme and Styling React app with Themer

Note:

  • You will need to restart “npm start” or “npx sencha app watch -fashion” after creating the new theme within the application workspace.
  • ExtReact currently does not support Fashion for React applications, so you will need to reload your application in the browser to see changes as you customize your theme.

Style ExtReact Components uniquely

Themer 1.3.3 supports creating multiple visual renditions of the same ExtReact component using a prop called “ui”. The example below shows that you can create “text-field-ui” in Themer and use in your React application, as follows:
this.query = field}
placeholder=”Search…”
onChange={this.onSearch.bind(this)}
/>


Creating Multiple Visual Renditions of Textfield Component

Creating Multiple Visual Renditions of Textfield Component

Try It and Share Your Feedback

We’re excited about this release, and we hope you enjoy building great looking apps with Themer 1.3.3. To learn more, read the docs and then try it out. We look forward to reading your comments and feedback in the Sencha Themer forum.

Recommended Articles

8 Must-Know Tips for Choosing the Right Web Application Framework for Your Project

Starting web application development on a project can feel like a very difficult task. The abundance of frameworks adds to the confusion. It leaves developers…

Web Application Development | Top 10 Frameworks in 2024

If you are a developer, you must know the role of frameworks in creating amazing applications. Web application development frameworks come with pre-built tools to…

Understanding the Difference: When to Use Ext JS Classic vs. Modern Toolkit

Ext JS is a JavaScript framework for building powerful web and mobile applications. The framework features over 140+ high-performance, fully tested, and customizable UI widgets/components.…

Ext JS 7.8 Has Arrived!

The Sencha team is pleased to announce the latest Ext JS version 7.8 release. Following the 7.7 release, which included numerous quality enhancements in Ext…

How to Work with Ext JS Models and Stores: Tutorial on Managing Data and State

Ext JS is a popular JavaScript framework for creating robust enterprise-grade web and mobile applications. The framework offers a rich set of high-performance and fully-tested…

Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development

Developing software without an architecture pattern may have been an option back then. However, that’s not the case anymore. Modern software development requires apps to…

View More