Category Archives: CSS

Reverse Engineer the Sencha FontAwesome package to get an overview of icons.

Posted on in CSS Sass

Ext JS 6, ships with a copy of the font-awesome icon font. Remember the Wingdings* Font from back in the days? Icon Fonts are somehow similar like that. An icon font is a (fontface) font, and every (unicode) character maps to an icon. Icon fonts are great, because they are all vectors. Therefore you can […]

Read more »

How to Create a Dark Ext JS Theme (part 2)

Posted on in CSS Sass

I’ve been showing you how to develop a fancy dark theme, which kind of looks like Spotify. In Part 1 of the article, you learned about Fashion, Sencha Inspector, Themes, and variables. In Part 2, I’ll focus on more advanced concepts including: making unique components with Ext JS UIs, CSS overrides, and how to incorporate […]

Read more »

How to Create a Dark Ext JS Theme (part 1)

Posted on in CSS Sass

Introduction Every now and then, I demo my Spotifinder Ext JS app. It’s a really cool app that connects to LastFm and Spotify. I created it, to demo Ext JS concepts in my training classes. It also shows off the great theming capabilities in Ext JS. This year, I presented advanced theming at SenchaCon and […]

Read more »

Using Custom Fonts with Sencha Architect

Posted on in Architect CSS Sass Sencha

Back in the days when websites were restricted to typical fonts such as Arial, Georgia, Times and so on, fonts were delivered from the user’s machine. Fortunately today, because of HTML5 and CSS3, browsers support embedded web fonts. This time, I will explain how to use custom fonts with Sencha Architect. For this tutorial, I […]

Read more »

Using Custom Fonts with Sencha Architect

Posted on in Architect CSS Sass Sencha Sencha Touch

Back in the days when websites were restricted to typical fonts such as Arial, Georgia, Times and so on, fonts were delivered from the user’s machine. Fortunately today, because of HTML5 and CSS3, browsers support embedded web fonts. In this month’s training tip, I will explain how to use custom fonts with Sencha Architect. For […]

Read more »

Creating Theme-Specific Overrides in Ext JS

Posted on in CSS Ext JS Sass Sencha

Ext JS provides a number of functions that make it simple to create and work with classes. It also provides a series of functions to extend or override existing JavaScript classes. This means you can add behaviors and create your own classes, or override the behavior of some functions. In this article, we will show […]

Read more »

Getting Started with Sencha Touch 2: Build a Weather Utility App (Part 2)

Posted on in CSS Sass Sencha Sencha Touch

In this three-part Sencha Touch tutorial, you will build the Do I need my Umbrella app, a simple utility app that loads weather information from a web service — worldweatheronline.com. Based on weather codes, this app can predict if you need your umbrella or not. In this second part of the tutorial, you will start […]

Read more »

Using Custom Icons in Your Ext JS Apps

Posted on in CSS Ext JS Sass Sencha

Do you like the glyph attribute in Ext JS 4.2 as much as I do? With glyphs, you can implement an icon that is created from a font. There are advantages to using icon fonts — they are vectors and therefore never lose quality; it’s easy to style icons without the use of Photoshop; and […]

Read more »

Fix: Chrome 29 breaks all Sencha Touch 2.* apps

Posted on in CSS Sass Sencha Sencha Touch

Please note: this bug won't occur with Sencha Touch 2.3 (and higher) I have to admit, I am in love with the Google Chrome browser. Except yesterday, Google Chrome automatically upgrades itselves to the latest version. This latest version, version 29, suddenly breaks all Sencha Touch 2.2 apps. And ya, you can't downgrade Google Chrome. […]

Read more »

Create an amazing Sencha Touch theme with SASS

Posted on in CSS Sass Sencha Touch

This tutorial shows you how to build an amazing Sencha Touch 2.1 theme: Like this one. Prerequisites: generate your application with Sencha CMD, so you have the MVC folder structure: [project] - app - - model - - store - - view - - profile - - controller - resources - - css - - […]

Read more »