Introducing React ReExt – Sencha Ext JS Components in React! LEARN MORE

Sencha Themer 1.1 is Now Generally Available

March 14, 2017 110 Views
Show

Today, we’re pleased to announce that Sencha Themer 1.1 is generally available. With Themer 1.1, you can visually inspect and modify styles of components in your app. You can uniquely theme components, including grid, list, tabpanel, title bar, and form components, to give your application a distinct look.

Download Now

What’s New

The following are some of the new features and enhancements in Themer 1.1. To learn more, please watch our recent webinar, Build Great Looking Themes with Themer 1.1.

Extensive Support for Creating UI Mixins

Ext JS components have UI mixins for generating multiple visual renditions of the component. Themer 1.1 makes it easy to create and style UIs for a large number of components including modern grid, list, tabpanel, title bar, and form components. As you start creating UIs within Themer, you will get access to all Sass variables to customize and create a distinct look for your application components. For modern grid UIs, you can uniquely theme grid cells, grid column header, row, group header row, and paging toolbar.

Themer 1.1 - Extensive Support for Creating UI Mixins

Easily Navigate and Style Components with Component Tree

Themer 1.1 adds support for component tree, which provides a powerful way to navigate, select, and style components in your app. The component tree is visible within Themer when you start inspecting your application. When you click any part of your application in the browser, the corresponding component in the component tree is selected. Then, you can configure Sass variables for that component.

Themer 1.1 - Easily Navigate and Style Components with Component Tree

Import Colors from Existing CSS File

Themer 1.1 allows you to import colors from your existing CSS file and add those to the color palette. In the color palette, click on the “upload” icon, select your CSS file, and you’ll have the option to select colors that you can add to the color palette. The added colors are shown in the color palette along with colors that are lighter and darker in increments of +/- 5%.

Themer 1.1 - Import Colors from Existing CSS File

Quickly Connect Your App to Themer with Bookmarklet

Themer enables you to directly inspect styles of your connected application and modify it. To connect your app to Themer, you will need to change app.json as specified in the Themer docs. With Themer 1.1, you have the additional option to connect with the bookmarklet, which can be found in Themer under View > Connected Apps. The bookmarklet will be generated using the port that Themer is using. You can drag the bookmarklet from Themer to your browser bookmarks bar. Once you have your app running in a browser, click on the bookmarklet to connect the app to Themer.

Import Themes with UIs in Architect 4.1.2

We’re releasing Architect 4.1.2, which is compatible with Themer 1.1. With Architect 4.1.2, you can import themes with UIs that are created using Themer. You simply open the theme package within Architect by adding it as a theme resource. Architect will copy the theme package into the project folder and apply the theme.

Win $2500 – Submit Your Theme to the Sencha Theming Contest

You only have one week left to submit your entry to the Theming contest. The entry deadline is March 20, 9am ET. Fork or download the Contest App, read the Themer Walkthrough guide, and submit a GitHub link to your contest theme by emailing [email protected]. We’ll email you within two days of your submission to let you know if your entry has been accepted. If you don’t receive an email confirmation, please contact us.

Please post any questions or feedback in the Sencha Themer forum. We look forward to reading your comments and seeing all of your creative themes!

Show
Start building with Ext JS today

Build 10x web apps faster with 140+ pre-build components and tools.

Latest Content
Discover the Top 07 Architecture Patterns used in Modern Enterprise Software Development
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…

JavaScript Design Patterns: A Hands-On Guide with Real-world Examples
JavaScript Design Patterns: A Hands-On Guide with Real-world Examples

As a web developer, you know how popular JavaScript is in the web app development…

Virtual JS Days 2024のハイライト
Virtual JS Days 2024のハイライト

2024年2月20日~22日、第3回目となる「Virtual JavaScript Days」が開催されました。JavaScript の幅広いトピックを採り上げた数多くのセッションを実施。その内容は、Senchaの最新製品、ReExt、Rapid Ext JSまで多岐にわたり、JavaScriptの最新のサンプルも含まれます。 このカンファレンスでは多くのトピックをカバーしています。Senchaでセールスエンジニアを務めるMarc Gusmano氏は、注目すべきセッションを主催しました。Marc は Sencha の最新製品「ReExt」について、詳細なプレゼンテーションを実施。その機能とメリットを、参加者に理解してもらうべく詳細に説明しました。 カンファレンスは、Senchaのジェネラルマネージャを務めるStephen Strake氏によるキーノートでスタートしました。キーノートでは、会社の将来のビジョンについての洞察を共有しています。世界中から JavaScript 開発者、エンジニア、愛好家が集まるとてもエキサイティングなイベントとなりました。これは、JavaScript…

See More