the singularity of being and nothingness
ExtJS
Virtual Directory-Driven ExtJS 4 Development
Nov 15th
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 code. Some of it is app-specific, but a lot of it is application-agnostic. For example, in my ColdFusion settings, all AJAX responses are prepended with “//”. Doesn’t sound like a big deal, but the default ExtJS 4 data readers don’t understand this…so I built a set of custom reader extensions that solve this problem.
So now that the application is more in “maintenance” mode, I’ve been taking an inventory of all the custom, globally-reusable extensions and plugins that I’ve created. And it’s got me wondering about how, exactly, one should (or could) leverage all this reusable goodness in a way that doesn’t require a clunky copy-paste for every project.
WorkspacesWith the release of Sencha Cmd 3.0, you can now leverage the concept of a “workspace” to aid in managing reusable code. I’ve not personally used this yet, but it seems like a really nice solution.
There is one serious More >
ExtJS 4: Applying Model Validations to Forms
Apr 23rd
One of my absolute favorite things about ExtJS’ data model is how simple it is to apply a Model instance to a form. If you’ve never done this before, consider the following data model:
Ext.define('Validations.model.Person', {
extend: 'Ext.data.Model',
fields: [
{name:"name", type:'string'},
{name:"age", type:"int"},
{name:"hobby", type:"string"}
]
})
Also, assume we have a form defined like so:
Ext.define('Validations.view.people.Form', {
extend: 'Ext.form.Panel',
alias: 'widget.peopleform',
bodyPadding: 10,
border: false,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
defaults: {
width: 250,
labelWidth: 70
},
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name'
},
{
xtype: 'numberfield',
name: 'age',
fieldLabel: 'Age',
value: 20
},
{
xtype: 'textfield',
name: 'hobby',
fieldLabel: 'Hobby'
}
]
});
me.callParent(arguments);
}
})
NOTE: Notice that the “name” properties of each form field maps 1:1 with the “name” properties in my Model.
Now, let’s say that we want to edit a Model instance. We could, of course, manually set the value of each form field to that of the corresponding field in the Model. However, this is clunky and unnecessary, given that the form itself has a method for doing this automatically. Consider the following:
// get More >
Quick Thoughts on Sencha Architect 2
Apr 21st
A few days ago, Sencha rolled out Sencha Architect 2, the major overhaul and rebranding of what was formerly Sencha Designer. You can check out the release blog post to get the low-down on all the new features.
When I saw the news about the release, I have to say I was a bit hesitant to look much further. I’ve tried Sencha Designer several times in the past, and I’ve been somewhat disappointed with it. Sure, it was great for laying out apps, but when you actually needed to *code*, it was lackluster at best. But even worse, I found it to be very buggy; it would crash at random times, and overall I found the process of trying to mockup an app to be more frustrating than anything else.
So initially, I wasn’t planning on even trying out the newest iteration. But then I noticed that one of the biggest additions to the product is support for creating a full ExtJS or Touch app–not just the UI. I felt I had to take a closer look, and I’m glad I did.
UIOut of the box, Architect 2 is worlds better than its previous iterations. The interface is slick and responsive, and the way More >
ExtJS 4: Querying Records in a Data Store
Feb 19th
As you come to use data stores regularly within ExtJS applications, you’ll quickly come to realize just how powerful they are. With very little code, you can create robust data repositories that can not only store complex data, but can (perhaps more importantly) drive components within your applications.
At some point, however, you’ll need to retrieve data from your Store in a query-like manner. That is, instead of looking up a record by a known ID or position within the store, you may need to find one or more records based on a search term, a category, or whatever else is required by your app.
Of course, as with everything else, ExtJS makes this pretty simple. Let’s suppose that we have the following Model:
Ext.define("MyApp.model.Bookmark", {
extend: "Ext.data.Model",
idProperty: "id",
fields: [
{name: "id", type: "int"},
{name: "target", type: "string"},
{name: "title", type: "string"},
{name: "category", type: "string"},
{name: "created", type: "date"}
]
});
Nothing to crazy here. Just a simple model with some standard kinds of fields for storing data, in this case, “bookmarks.” Now, let’s More >
ColdFusion Queries to ExtJS Data Models
Jan 8th
I love data Models in ExtJS. They are extremely simple to use, but are amazingly powerful for driving robust JavaScript applications. In fact, I’ve gotten to the point where I use them in just about everything I do, and they are fast becoming an indispensible part of my JavaScript development approach.
A big part of the appeal of ExtJS data Models is their flexibility. While some data “plugins” in other JS frameworks certainly allow you mimic some of the behaviors of a data model, ExtJS’ data Model wins hands down because of its extreme flexibility. With a ExtJS Model, you can quickly and easily create powerful definitions of data objects (fields, data types, associations, validations, etc.) in your application. These models can then in turn be used to craft a data Store, which can themselves be plugged into many of ExtJS’ data components (DataView, Grid, Chart). What you end up with is a super-powerful, deeply-data-driven application in a ridiculously small number of lines of code.
Of course, the perfect complement to the simplicity and grace of ExtJS’s data Model is to “feed” it using ColdFusion. Below, I’ll outline how to retrieve data from CF, as well an extremely easy way (there are More >
ExtJS 4: Filtering on Multiple Fields
Nov 23rd
Filtering ExtJS data stores is stupid-simple. When filtering, you have 2 main options:
- Filtering on a property (e.g., “field”)
- Filtering with a custom function
Ext.define('Person', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{'firstname', type:'string'},
{'middlename', type: 'string'},
{'lastname', type: 'string'}
]
});
Ext.create('Ext.data.Store', {
autoLoad: true,
model: 'Person',
storeId: 'PersonStore',
proxy: {
type: 'ajax',
url: 'myurl.json',
reader: {
type: 'json',
root: 'people'
}
}
});
Ok, now that we have those set up, let’s say that we want to filter our results to only those people whose last name contains “son” (like “Watson”). Using the property filter, we can do this very simply:
var store = Ext.data.StoreManager.lookup('PersonStore');
var peoplefilter = new Ext.util.Filter({
property: 'lastname',
value: 'son',
anyMatch: true,
caseSensitive: false,
root: 'data'
});
store.filter(peoplefilter);
Nothing to it, right? There are two important parts here. First, for “property”, we are simply specifying the field in our Model which we want to filter on…in this case, “lastname.” Second, we specify that we want the filter to look at the “data” object of each record–otherwise, it will fail miserably
For simple filtering, using the “property” method will get you by pretty good. For More >
ExtJS 4 Theming: Custom UIs
Sep 29th
In a previous post, I walked through the simple process of creating a custom UI for a toolbar in Sencha Touch. Since theming in Sencha Touch and ExtJS 4 are extremely similar, I thought I’d walk through the same process, but with an ExtJS 4 flair.
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 MakeIn 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 More >
ExtJS 4 Theming: Getting This Thing to Go
Sep 28th
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 very similar workflow for creating and compiling custom themes. I’ve been playing around within some theming experiments, and learned some frustrating lessons along the way. So I thought I’d share, step-by-step, how I set up my environment for successfully compiling custom stylesheets for ExtJS 4…just in case you’re having issues
Getting StartedFirst off, I’m assuming you already have Ruby and the Compass/SASS gem installed. If you don’t take a few minutes to get that done. For instructions on how to do this, check out this walkthrough.
Before breezing on, take a few deep breaths. This is a critical step…if you don’t do it right, you have hours of frustration ahead of you.
I start off with a blank project (I’m using Eclipse, so insert whatever terminology you use for your IDE). First, I create the root folder for my project. I’m calling this one “playground.”
With my root More >
Hello 2003, Let’s Build a Stylesheet Switcher!
Aug 27th
Back in the day, stylesheet-switchers were super-cool. I can clearly remember the thrill of creating several “themes” for a website, hooking them up to a cookie, and letting the awesome-ness roll. And in a way, they were pretty cool. After all, having the ability to switch the theme of a website did give *some* customizability to your website, even if the rest of the website was horrifically static!
But the big problem with switching stylesheets in the old days was the incredible headache of trying to maintain X-number of iterations of stylesheets. Need to switch the hue of the link colors? Bust out the find and replace, and be sure you don’t miss any! Want to add a bit of padding to your navigation? Rinse, repeat, and puke. It was burdensome, and prone to many mistakes. I can remember advocating STRONGLY on many occasions to just “live with” the current styles, rather than facing down the daunting task of modifying 8 different stylesheets which may or may not have had any comments/guidance/formatting to them (ok, some of that’s my bad I’m sure…).
So because of these frustrations, stylesheet-switching fell out of favor…at least with me. Too much work for not enough payoff. But those days More >
ExtJS 4: My First Build
Aug 25th
One of the really great aspects of ExtJS 4 is the ability to configure how dependencies in your application are loaded, using asynchronous loading, synchronous loading, or a combination of both. This flexibility lets you really dig into detail when debugging, and you are able to file-by-file see where errors are occurring, where processes can be improved, etc. But even more, you can specify very granularly which files you want–and need–while excluding those you don’t.
Of course, all of this is really meant for your development environment. While it’s fine to load 70+ individual JavaScript files while working out your app’s functionality, you *definitely* do not want to impose such a monstrous load on your site’s actual visitors. This, after all, is why everyone uses ext-all.js. It’s the whole framework, smashed down into a single, minified file. But the problem is that it’s still the *whole* thing. There are probably a bunch of bits of ExtJS that you don’t need. This is where the Sencha SDK tool’ can help create a custom build that includes everything you need for your application to run, without the overhead of all the stuff you don’t.
In what follows, I’m going to outline my first ExtJS 4 build using the SDK More >
