the singularity of being and nothingness
JavaScript
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 >
Sugar: A Bit of JavaScript Sweetness
Jan 5th
Twitter never lets me down 🙂
Today, I stumbled upon Sugar, a really nice–and small–JavaScript library. Unlike monster libraries such as jQuery and ExtJS (which are awesome in their own ways…), Sugar is narrowly focused. It’s niche is simply extending native JS objects with intuitive methods.
So want to capitalize the first word in a string? Easy: string.capitalize(). Want to replace dashes/underscores with spaces? Nothing to it: string.spacify().
I’ve worked up a quick couple of demos of a few of the string methods, just to show how dead simple Sugar is to use. Of course, you should check out Sugar’s API for the full enchilada. Mmmm, enchildas…
ImpressionsWhile I am a die-hard ExtJS user, there is something about the simplicity of Sugar that I really like. While it certainly won’t give you the tools to build a full-fledged web app with components, data grids, and what-not, it’s perfect for the small or one-off websites/pages where JS’ native objects could use some extra lovin’.
The one drawback (and it’s a slight one) is that there does not appear to be a way to do a custom build of Sugar to include *only* those methods which you need. According to their blog, this is because of some internals of Sugar More >
Resolutions and Stuff
Jan 2nd
I’m not big on resolutions. When I’ve made them in the past, I typically last about 3 whole days before they’re broken and forgotten. Besides, there’s something a bit odd about resolutions anyway. After all, why would we wait until a New Year to do something (lose weight, exercise more, etc.), when it makes a lot more sense to do these things *before* the year begins so that we have the benefit of whatever change for the whole year?
Ah, but that’s the neurosis of the Western mind; what can be done about it? Nothing 🙂
But even though I’m reticent about making resolutions, I have been thinking about the year that lies ahead, particularly from a professional standpoint. Over the last year, I’ve been very productive in my professional development. Particularly in relation to ColdFusion, JavaScript and SQL, I have tremendously expanded my competency, and I feel quite comfortable with where I am as a developer.
However, as we all know, complacency can be a silent killer. While it may not immediately harm a person in relation to their employment prospects, it can be detrimental in the long-term, if nothing else than by souring them to the prospects of learning new skills, 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 >
Sencha Touch Theming: Custom UIs
Sep 23rd
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 specific example. Let’s imagine that you want to simply change the background color on your app’s toolbars. The first thing you’ll probably do is pop open Firebug or Developer Tools to inspect the CSS that’s being applied to your toolbar. Unless you’ve already customized it, you’ll probably seem something like this:
I’ve highlighted “x-toolbar-dark”, because by default, the “UI” configuration option for Ext.Toolbar is set to “dark,” which applies the “x-toolbar-dark” class to your toolbar (it will apply “x-toolbar-light” if you specify “light” for ui…more on this later).
Here’s what the toolbar actually looks like:
If you inspect the properties of this CSS class, you should see something like this:
- background-color: #456F8D;
- background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #9cbacf), color-stop(2%, #5182a5), color-stop(100%, #395c75));
- background-image: -webkit-linear-gradient(#9cbacf,#5182a5 2%,#395c75);
- background-image: linear-gradient(#9cbacf,#5182a5 2%,#395c75);
- border-color: black;
Nothing too crazy here…just some background-image gradients to give the toolbar a nice textured feel. Now at this point, you might be tempted to do something crazy, something More >
Sencha Touch EditableList
Sep 21st
Yeah, I know, I’m not the first person to the “create an EditableList for Sencha Touch” party. In fact, if you Google “sencha touch editable list,” you’ll find a lot of really nice code that will let you pretty easily integrate basic delete/sort functionality into your Sencha Touch app.
However, none of the offerings I ran across really fit the bill of what I was wanting, in terms of interface. Plus, it’s so much MORE FUN to build your own, right? Right!
What I WantedMy wish list for my EditableList was pretty straightforward: I wanted it to behave *more or less* like my iPhone’s Mail app list editing. This includes:
- One click to do a batch deletion/archiving of list items (btw, I absolutely HATE the same interface in the default iPhone text message app…)
- The ability to swipe-delete individual messages
- Some animations to make it somewhat mimic the iPhone Mail app’s animations (think “sliding” the deletion selectors in and out)
In addition to this, I wanted more or less everything–functionality, layout, interface–to be baked into my one custom extension. One of the things I didn’t like about some of the other solutions I found is that they required a certain structure external to the list More >
Sencha Touch: JumpToNode and the NestedList
Sep 7th
Sencha Touch’s NestedList is an excellent component for creating the compact “drill-down” effect that we’re all used to on our mobile devices. It’s super-flexible, too. Whether you have a canned set of items, or need to retrieve each “level” via AJAX, it’ll handle it.
I’ve used NestedList quite a bit, and have been generally happy with it. One of the issues I’ve come across, though, is that it does not (as far as I’m aware, at least) support jumping around to arbitrary nodes with the NestedList.
Huh? So here’s an example 😉
Let’s say you have a bunch of products that exist within categories of variable depth. Once you reach the “product” level of your NestedList, you can out-of-the-box call getDetailCard(), build out your detail view, and be done with it. NestedList will take care of the navigation bits, and your site’s visitor will get a nice “back” button to return to the category list they used to get to the detail product.
Fine and dandy. BUT…what if you have links on your detail “card” to related products? Maybe these products exist in the same category, at the same “depth” in the nested list. But maybe instead they are in an entirely different category, More >
