In fact, the last post that I wrote was meant to be this one. However, as I worked through the process of creating a custom UI, I found that the setup of Compass compilation for ExtJS 4 might have some *gotchas* that could trip people up (like me), so I decided to start from the beginning, get a solid foundation, and now move on to the actual fun stuff.

Ok? Good? On we go!

What We’re Going to Make

In this walkthrough, we’re going to try to accomplish a few things.

Objective #1: I want to show how it’s perfectly possible (maybe preferable?) to mix custom UIs with the stylesheets/images/etc. of the “default” ExtJS 4 theme. In this particular example, we’re going to create a custom Ext.ProgressBar UI.

Objective #2: We’re also going to create a custom stylesheet that produces only the minimum of what we need for the “application” we’re going to build. So instead of having a monster ext-all.css file that includes ALL the styles for the entire library, we’re going to pare down our final stylesheet to only the bare bones of what we need.

Objective #3: We’re going to use the SDK’s “slice” tool to create “backup” images for old, crappy browsers that don’t support CSS3 goodness like background gradients and borde-radius.

BTW, I want to be completely up front about this. Nothing I’m doing here is “new” to me. The basic structure of what we’ll be doing is shamelessly stolen from the Theming Guide on Sencha’s website. I wanted to walk through the process, though, a bit more in depth with screenshots, code snippets, and real examples, just so any trip-ups can be explained and dealt with along the way.

Let’s Get Started

In what follows, I’ll be using the structure that we setup in the last post on this subject. Obviously, you can flex it to suit your needs; however, if you want to follow along step-by-step, be sure to take care of that first. If you’d like some source code, grab it on GitHub.

Once you’ve got these set up, go ahead a open your file in the browser. You should see a fancy blue panel, which contains a fancy blue animated progress bar.

Now that we have something that’s working, let’s get down to styling the darn thing!

Ok, the first thing we’re going to do is to make a copy of our “my-ext-all.scss” file with the playground/extjs/resources/custom folder. Since we’re making a custom Ext.ProgressBar UI, I’m going to call this new file “progress.scss” (if you can’t tell, I’m a sucker for originality). Since our config.rb file was working as expected in our last walkthrough, it’s fine how it is; no need for us to mess with it anymore.

Now, open up progress.scss. At the very top, you’ll see a variable called $include-default. If it’s not already, set it to false. This tells the compiler to NOT include the entire all components in our final .css file. Also, setting this to false will allow us more granularly specify exactly what components we want to include (see Objective #2 above).

Moving on down the file, we’ll come to a section that has a list of all the components. It should look something like this:

If we leave this as is, the compiler is going to pull in all of the style rules for these components into our stylesheet. However, since we’re only using 2 of them (panel and progress bar), let’s get rid of the others.

The final list should look like this:

@include extjs-panel;
@include extjs-progress;

Awesome. Ok, the final line in our progress.scss file is the variable $relative-image-paths-for-uis, and is set to true. I’ll leave the note for you to read, but let’s leave its value as true.

// Unless you want to include all components, you must set $include-default to false
// IF you set this to true, you can also remove lines 10 to 38 of this file
$include-default: false;@import 'compass';@import 'ext4/default/all';
// You may remove any of the following modules that you
// do not use in order to create a smaller css file.
@include extjs-progress;@include extjs-panel;
// This line changes the location of your images when creating UIs to be relative instead of within the ExtJS directory.
// You MUST set this to true/string value if you are creating new UIs + supporting legacy browsers.
// This only applies to new UIs. It does not apply to default component images (i.e. when changing $base-color)
// The value can either be true, in which case the image path will be "../images/"
// or a string, of where the path is
$relative-image-path-for-uis: true; // defaults to "../images/" when true

Before moving on, let’s go ahead an compile. I want to show that while we haven’t actually done any style customization yet, we can reduce the size of our CSS file by only including the components we need.

To compile, navigate to the custom folder and execute the compass compile command. Once this completes successfully, you should see a new CSS file in the playground/extjs/resources/css folder called progress.css.

Now go back to your progress.html file and change the stylesheet link to point to this new CSS file. Reload the page. If everything compiled correctly, you shouldn’t notice any difference. However, if you look at the progress.css file itself, you’ll notice that it’s quite a bit lighter than the full ext-all.css. Yay, we did it Objective #2 is complete!

Get on with the Custom UI Already!

Yeah, I know, we’ve gone through a lot of background stuff. However, I think it’s important. After all, you don’t want to spend a bunch of time creating custom UIs if your .scss file’s basic structure won’t compile correctly. So I strongly advocate verifying that each step is working correctly before moving on. But since we’ve already done that, let’s get to some styling!

As with creating a custom toolbar UI in Sencha Touch, a great place to start with creating our custom ProgressBar UI is to figure out what the “mixin” for the ProgressBar UI looks like, what arguments it takes, etc. This will allow us to fully maximize the customization that we make in our custom UI.

To inspect the ProgressBar UI mixin, we can simply navigate to the following:

In the above, I’m creating a new progress bar UI called “lime.” I set a custom variable for the base-color I want to use, and then simply specify the colors that I’d like for the background, border, text, etc.

Once everything looks good, it’s time to compile. Now that my newly compiled CSS file has the “lime” ui for my progress bar, all that’s left is to apply the UI to the progress bar itself:

In playground/js/progress.js:

var p = Ext.create('Ext.ProgressBar', {
margin: 50,
ui: 'lime'
});

Once I save this, I should be able to reload my HTML page, and see a beautiful lime green progress bar inside of the default blue themed panel.

Using this approach, we could create as many UIs as we’d like, simply adding similar snippets to our progress.scss file and recompiling when ready to use them.

Ah, But We Couldn’t Get This Far WIthout a Gotcha…

Yes, indeed. Even though we’ve successfully compiled our custom CSS file with a custom progress bar UI, there’s one slight problem…depending on how you look at it, at least. What’s the issue?

Pop open your progress.css file that you just compiled. If you go all the way to the end of it, you’ll see this style rule:

Notice the background-image with “lime” in its name. Now, if you go to that path, guess what you’ll find? You’ll find a progress-default-bg-gif file, but no progress-lime-bg.gif file. What gives?

Well, because ExtJS is a thoroughly committed cross-browser framework, the theming tools automatically create style rules to accomodate old, crappy browsers like < IE9. So for example, since older versions of IE don’t support background gradients and rounded corners in pure CSS. ExtJS 4’s stylesheets achieve the same effect through background images.

Therefore, when you create a custom UI, the compilation automatically provides a rule to a theoretical image that you will create, and even handily names it according to your theme.

At this point, you might feel hoodwinked. After all, who wants to be bothered with creating images for background gradients and rounded corners? Not me, for sure. And if you really don’t care, just skip it. However, if you need to finish out this process, the SDK fortunately has one more tool that will make this ridiculously easy…and you’ll never have to open Photoshop, not even once.

Sencha Slicing Tool

Sorry, the Sencha Slicing Tool won’t give you finely shaved roast beef (I tried…). However, it will help you create the “helper” images to support your theme in outdated browsers. Here’s how we do it.

The first step is that you have to create a “manifest” of your UIs and the components to which they correspond. This basically allows the Slicing Tool to determine precisely which images it needs to create based on the type of component, the parameters of your UI, etc.

The manifest is a simple JSON file. I added mine into the playground/extjs/resources/custom folder, right along side my custom .scss file.

Nothing to it. We simply define the component’s xtype, as well as the label of our custom UI that we’re going to use for it.

If you don’t know the “xtype” for the component you’re using, the easy way to find out is to look up the component in the documentation. Next to the class’ name, you’ll see the xtype.

Now for the fun part. Open up Terminal, and navigate to the root of your project.

Now, we need to execute the proper command with the appropriate arguments in order to allow the SDK to do its magic. First, here’s the full string I used. Assuming you have the same setup, it should work without issue:

-d extjs : -d is for the directory of ExtJS. In our case, this is “extjs”, relative to our root directory

-c …progress.css : -c is for the path to the CSS file which will be used in the Slicing process

-o …default : the path to the main “theme” images folder. Since our CSS is already pointing to the “default” theme’s images folder, that’s where we want the new image(s) created by the Slicing tool to go

-m …manifest.json: -m is for the path to the manifest.json file we created, which will tell the Slicing tool what kinds of images it needs to be creating, based on the custom UIs that we’ve specified

-v : this simply instructs the program to give us a listing of the images that its creating

Alright, good to go. Let’s run the command. You should see something like the following:

As you’ll notice, the tool has generated a new image, and saved it to the location we specified. If we go back and look now, we’ll see that we now have two images in our folder.

…And with that, we’re done. Objective #3 complete!

Wrapping Up

If you’ve been following along this and the previous posts on theming ExtJS 4 and Sencha Touch, I hope you’re catching on to just how powerful the theming possibilities are. Sure, it can take a few minutes to get setup…but once you are set up, making remarkable changes to your application’s theme is dead simple. As we’ve only just scratched the surface of what can be done, I hope you’ll continue to explore.

To answer your question, the new lime green bar does have a gradient (if you inspect the .x-progress-lime .x-progress-bar in Firebug/DevTools, you’ll see that it’s using a background-gradient). I think because of how light the base color already is, the gradient is just more subtle than it is with the dark blue.

And the best part is that with the mixin, you could easily adjust this if needed.

I was going through your tutorial and found an error, I believe, in your first code snippet. In the declaration of the progress bar variable you use “p” but then do a .wait call on “pb” and add “pb” to the items array for the panel. I changed the initial variable declaration from “p” to “pb” and all is good.

No trackbacks yet.

Yesterday, I was helping someone figure out how to add a custom, complex editor for use in a ExtJS Property Grid. The Anatomy of a Property Grid For some context, a Property Grid is like an editable grid, but instead of editing rows of data, you use a grid like interface to edit the properties…

If you’ve been following along the last few posts, you’ve seen how it’s relatively simple to set up your local development environment to leverage global library assets to create ExtJS 4 applications. What you’ve probably also noticed is that there are a number of configurations (some one-time, others per-application) that need to be implemented before…

Over the last several months, I’ve been incredibly lucky to be able to work with ExtJS 4 on a daily basis. And I’m not just talking about dabbling here and there; rather, I mean developing a full-on legit application. It’s been awesome. As I’ve been building this application, I’ve developed a TON of custom, reusable…

Recently, I’ve been concentrating a lot on theming for Sencha Touch. If you’ve read much of what I’ve posted, you know that I really love how the framework is put together, and think the SASS-y mode of custom theming is just awesome. Of course, ExtJS 4 has many of the same theming features, and a…

During the course of developing your Sencha Touch app, you will inevitably get around to theming…after all, while the default styles are nice, they don’t exactly scream individuality. Fortunately, Sencha Touch makes theming ridiculously easy, and there are a lot of resources available to help with getting started with that. But let’s talk about a…

In a blog post I ran across recently, someone was trying to intercept the closure of a window via the “X” icon in the top right corner. The idea was to be able to run additional processing before closing the window (such as confirming save/cancel of data, resetting a form, updating a record, or whatever…

In ExtJS 4, you can do some pretty powerful stuff inside your controllers using ComponentQuery. In the following example, I have a simple grid panel view, and I’m using ComponentQuery in my controller to handle itemcontextmenu events within the grid: views/Bookmarks.js Ext.define(“ME.view.bookmarks.List”, { extend: “Ext.grid.Panel”, alias: “widget.bookmarks”, store: “Bookmarks”, scroll: “vertical”, title: “My Bookmarks”, initComponent:…

Recently, I’ve been working pretty furiously on the rewrite of Gloss, my first serious ExtJS application. I wrote Gloss in ExtJS 3, but wanted to give it a much-needed overhaul now that ExtJS 4 is out. One of the more useful features of Gloss (well, I think it is at least) is the search functionality.…

Ok, so a lot of posts I make are not so much about “hey, look at this cool thing I figured out” as much as it is saving a reminder of myself for how to do something when I inevitably forget it later on So for today’s example, the problem I was having was how…