the singularity of being and nothingness
ExtJS
My First Sencha Touch App
Feb 21st
As readers of this blog know, I’m a pretty big Sencha fan. I <3 ExtJS…seriously, I love pretty much everything about it, from how great the default UI is, to how ridiculously easy it is to build awesome applications in zero time. So when I heard a while back that Sencha was combining ExtJS, jQTouch, and Raphael to create a mobile framework (Sencha Touch), I knew it was something I’d have to try.
And try I did…well, really, it was more like dabbling. I had ideas that I wanted to test out, so over the last few months I’ve been experimenting in between life and other projects. But no matter how hard I tried or how good my ideas were, I couldn’t really find the motivation to bring anything to completion…or even to a real start. Until this weekend.
The CatalystYou see, my darling 5-year old daughter is valiantly learning to read. But like a lot of kids (I think), she has trouble staying motivated and gets frustrated easily when she’s not able to hit a home run with the new things that she tries.
As I’ve been working with her on reading, I have reflected on my own experiences. While I’ve always loved More >
Replacing HTML Anchor Jumps with ExtJS
Jan 22nd
In an app I’m currently working on, I make pretty heavy use of HTML anchors to not only move to target content on the page, but also to load content via AJAX. With normal HTML anchors, clicking on a “source” anchor (e.g., <a href=”#top”>) will jump to the destination anchor (< a name=”top”>). While this is definitely beneficial, the one downside is that this action additionally adds the anchor (“#top”) to the url string (plus, the “jump” in kind of harsh-not very sexy at all).
Since my app is completely AJAX-ified (meaning that there is no navigation between “pages”), I wanted to find a way to preserve the “jumping” behavior of anchors, but not have my url cluttered with anchors.
Turns out that with ExtJS, this is pretty darn easy.
Getting the AnchorsNow of course, you could always modify all of the anchor links in your files to replace all the “href=#…” with onclick JavaScript events. However, what if you have existing anchors that you don’t want to change? With ExtJS, you can easily find all of them and override the default behavior. In my app, all of my anchors have the following form:
<a href="#WSXXXXXXXXXXXX">...<a>
Since I know that they all begin with More >
Sencha: Creating Child Stores
Oct 11th
One of the things I <3 about Sencha is the data store. They are super-simple to create, but very powerful for creating robust, data-driven applications. The other day, I found myself creating 3 data stores that were extremely similar, simply because of the fact that the data returned was fairly complex and nested. You see, with a Sencha store, you define a “root” of your data, which is really just how the store’s Reader will treat the “rows” of data that are fed into the store. This works very well, but in my scenario, I was wanting to create a master store of data defined at the highest possible root, and then create child stores based on some of the nested objects belonging to my initial data set. So in this case, instead of making 3 remote calls to get the same, but differently-structured data, I wanted to make 1 request and use the result 2 more times for different stores.
At first, I looked to the store itself for something like a “copy” or “clone” method, but there was none. There IS an option for doing an “each” loop for every record, but that just seemed a bit overkill. But More >
Sencha: Defining Store Fields
Oct 11th
If you’ve ever created a data store with the Sencha framework, you’re familiar with defining the “fields” for the store’s data. Something like this does the trick:
var myStore = new Ext.data.JsonStore({
id: "myJsonStore",
url: "datasource.js",
fields: [
"id",
"name",
"age"
]
});
This method of defining data fields works perfectly well, but is not very extensible. After all, what if you have several stores for which you want to use the same field definitions? Yeah, you can define the same fields for each store, but wouldn’t it be better to define it once, and then customize it as needed?
Fortunately, this is super-simple to do. When you define fields “inline” while creating the data store, what you are really creating is something of an impromptu MixedCollection (a Collection class that maintains both numeric indexes and keys and exposes events, per the docs). Ah, so if it’s nothing more than a Sencha object, we can abstract it from the store itself, and reuse it to our heart’s desire!
var mydef = new Ext.util.MixedCollection();
mydef.addAll([
"id",
"name",
"age"
]);
Obviously, this looks extremely similar to what we did inline. However, the huge difference is that this new, abstracted object has some handy methods for retrieval, addition More >
Ext JS is Now Sencha
Jun 16th
This caught me a little by surprise. A few days ago, Ext JS-a pretty awesome JavaScript framework-announced that it is joining forces with jQTouch and Raphaël to form a new company named Sencha. Branding, domain-everything is changing.
Personally, I really like this move. To me, it shows that Ext JS is interested in expanding in very important directions-vector graphic JS manipulation and mobile content-by teaming up with jQTouch and Raphaël. I’ve used Raphaël in the past for some pretty cool and simple effects, but have yet to really play around much with jQTouch (although it looks pretty sweet). Anyway, I am definitely looking forward to what’s ahead for this already great framework..the future looks very bright
Interested in learning more? Check out Sencha’s official blog post about the merger.
Share this: Ext JS Screenshot Fun
Mar 2nd
Quick (ok, not really) video about some screenshot croppin' goodness with Ext.
Check it out, and become my Facebook friend while you're at it!
Share this:
Ext to ColdFusion…Nice!
Feb 21st
So I know a lot of the posts I’ve been writing recently have been about stuff that’s been around a while-Ext helper functions, CFScript, etc. Nonetheless, I post them because some of the answers to questions I’ve found in developing solutions have been less-than-easy to find, so perhaps repeating some of the same things again will help Google find it a bit easier for someone else someday.
On with redundancy!
Obviously, JSON-related technologies have been around for a while, and with ColdFusion 8, a lot of native JSON handling was added for the creation of some sweet AJAX-y goodness. While I’ve dabbled with these, I’ve never really had a need for them…until now.
I recently developed a remote CFC function that required about 12 different arguments. On the client side, I also developed a quick EXT Ajax.request() method to pass these arguments into the CFC function.
Now with Ext, it’s incredibly simple to pass arguments to server-side functions, as this example illustrates:
Ext.Ajax.request({
url: 'com/functions.cfc',
success: successMethod,
failure: errorMethod,
headers: {"Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"},
params: {method:'setupLife',argument1:arg1,argument2:arg2}
});
I like this alot, because it allows me to treat each argument as its own “thing,” rather than stringing together a bunch of “&argument1=arg1″ in the query string.
But what if More >
30 Seconds with Ext
Feb 11th
Ok, so this is not earth-shattering, but I came across a pretty cool feature in Ext's DomHelper class the other day.
But first, a little context. Don't you just HATE creating new HTML elements with JavaScript? If you go the route of explicitly pasting them together, your code ends up looking like spaghetti…and I hope you're good at tracking down escaping errors
And what about wrangling with createELement, appendChild, and the ilk with their corresponding unpredictable behavior across browsers?
It's a gigantic pain in the butt, but as I found out recently, Ext makes it SUPER simple. Using the DomHelper class, you can easily leverage Ext to confidently generate any number of elements without having to worry about escaping characters or remembering the nuances of creating elements for each browser.
Let's say I just want to make a new table:
Ext.DomHelper.append('cart-details', {tag:'table', id:'detail-table'});
In this super simple example, I'm adding a new table element to an existing div with an id of "cart-details." To add the table, I simply invoke the append() method from the DomHelper, and 40 characters later I'm all set.
But what is even cooler is that the DomHelper class allows you to create NESTED elements as well! Check this out:
Ext.DomHelper.append('detail-table', { tag: More >
Converting ColdFusion Queries for Ext
Jan 21st
At my new job, we use Ext fairly regularly to get some pretty cool AJAXiness up in the mix of things. To familiarize myself with Ext (I’ve not really used it until now), I recently downloaded the newest version and have been playing around with it quite a bit.
One of the elements I like quite a bit is the data grid. Like most other things, Ext makes it pretty simple to pull off a slick sortable, pageable data grid with very little work.
Of course, given that I use ColdFusion alot, I decided to hook up a grid to a remote CFC call. While the call itself is easy enough to do, there is one issue: the JSON that CF returns is in a format that Ext cannot quite understand.
Now there are a bunch of pre-built converters out there, some more robust than others (and a few I couldn’t quite get to work).
So in the spirit of trying to figure it out for myself, I wrote up a simple function in ColdFusion that will take a regular query and convert it into happy JSON that Ext can deal with.
First, here’s our function to create our generic query:
<cffunction name="getPosts" access="remote" returnformat="json" output="false" hint="Gets list/detail More >
