the singularity of being and nothingness
JavaScript

Adding QTips to GridPanel Rows in ExtJS 4.0
Jul 4th
Need to add a custom tooltip (quick tip) to rows in a GridPanel in ExtJS 4.0? Super easy. In your column definitions, simply add a rendered, passing a custom function.
this.columns = [ { text: “Bookmark”, dataIndex: “title”, flex: 1, renderer: function(value,metaData,record,colIndex,store,view) { metaData.tdAttr = ‘data-qtip=”‘ + value + ‘”‘; return value; } }…
A couple notes:
- Make note of the “metaData” object. I think in earlier versions, the “tdAttr” was just “attr”…so if you’re upgrading, you might have to make a slight change
- Notice the namespace for the qtip. In earlier versions of ExtJS, it was “ext:qtip”, but has been changed to “dadta-qtip”…no biggie, but a headache if you didn’t read the docs 🙂
That’s it! With such a slight modification, you get a nice tooltip generated for each row in your grid. Enjoy.
Share this:
Some Thoughts on ExtJS 4
May 26th
Very recently, Sencha released the newest version of ExtJS–4.0. This release was significant, in addition to other important changes, because ExtJS 4 signals a real shift in how Sencha is pushing developers to use ExtJS. Before, you could really kind of hack together ExtJS apps, regardless of how well your efforts aligned with “best practices.” The same is still true, I suppose, but ExtJS 4 is now all about MVC…and they are quite vocal about it.
By this, I mean that this rework of the framework has been explicitly designed, optimized and advertised to be used in a very particular MVC-ish way. There are even some fairly involved (but still inadequate, IMO) tutorials that describe the “preferred” way for designing a full-on MVC ExtJS 4 app, and the SDK comes with some tools baked in that will even build out the “preferred” structure for you.
So it just so happened that mere weeks after the release, I had the opportunity to develop a new app, and I decided to take the dive into ExtJS 4. Here are my thoughts on the experience, in no particular order.
Learning…and LearningFirst, the learning curve–for me at least–was initially pretty steep. It wasn’t so much the MVC aspect More >

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 >

HTML5 Geolocation
Jul 9th
Continuing on from my last post regarding new client-side storage options, I decided to keep the trend of HTML5-related posts coming 🙂
So unless you haven’t visited the web in the last 3 years, you know that location-based services are super-hot right now. If social networking was the final result of Web 2.0, wiring-in people’s browsers (both position-locked and mobile) to geolocation is easily Web 3.0 and beyond. For example, with few exceptions, the vast majority of my iPhone apps have some geo-location component. Whether it’s my RedBox app finding me the closest kiosk, or FourSquare letting me “check in” to new (and not so new) locations, nearly everything I do on the web is able to be tagged with a location. Every tweet, every Facebook wall post, heck, even this blog post have geolocation data attached to them. In every possible way, the web is no longer just about “what” you are doing–it’s where you’re doing it as well.
To help make this more of an integrated reality, HTML5 will come fully-loaded with baked-in geolocation support. As with client-side storage, dealing with the geolocation options is quite easy.
Let’s take a look at a simple example. In what follows, I simply want to More >

HTML5 Storage: Goodbye, Cookies
Jul 8th
If you’ve done any web development, at all, ever, you’ve undoubtedly used–and cursed–the clunky cookie.
In all fairness, cookies are nice for what they are. You can store basic information about users and their behaviors on the user’s machine for use on your site, and they are fairly reliable. The problem with them, though, is that they are clunky. Clunky to set, clunky to expire, and quite limited in terms of storage capability–4000-some characters…lame.
Fortunately, in HTML5, we have a much better option for light-weight client-side storage (like cookies) without the clunky-ness, retarded size limits, and potential “leak” issues. Actually, we have two 🙂
First, let’s talk about the Storage object to which the two options belong. According to the proposed spec, the Storage object provides access to set, read, and remove “items” which are basically the key/value pairs that everyone is familiar with. Unlike cookies, however, the key/value pairs do not have an expiration date associated with them, and are removed either by user action or by the cessation of a session.
Enough talk. Let’s look at the options.
sessionStoragesessionStorage is an attribute of the Storage object which represents a storage area for each “origin” [read domain]. In other words, sessionStorage is a place you 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:
New Spry Enhancements
May 1st
Even though I've pretty much given up on Adobe's Spry Framework, I noticed yesterday that some major updates have been added in, primary among them the introduction of Spry UI. According to the Spry Team's blog post, Spry UI is a new way of approaching Spry widgets that moves away from the previous (and kind of annoying) necessity of following a prescribed markup model and now attempts to work with user-defined patterns. This *should* allow for much more flexibility and customizability, and allow for much more robust opportunities for skinning that were previously possible. Moreover, because all the widgets will now inherit from the same shared base classes, the door is widened for Spry to become a much more robust framework in the future.
Does the introduction of Spry UI mean that Spry development is alive and well, and that Adobe is committed to making something of it long term? Only time will tell.
The problem for me, of course, is that time is precisely the problem. Development of the framework has been seemingly eternal, and significant updates (whether features or simply information about ongoing development) are VERY infrequent. While I see a lot of promise in what Spry can do More >