A Fond Farewell to Sencha

A Not-So-Brief-History

It was about 7 years ago when I was first introduced to Ext JS. My introduction wasn’t anything overly fancy; it was just an Ext JS grid (version 2!) plopped down on a random webpage. However, from the moment I saw the code for the first time, and how easy it was to configure an awesome and totally Web 2.0-looking grid that could easily interact with the data coming from my ColdFusion (yikes!) application server, I was hooked.

I distinctly remember spending the first solid week of a brand new job racing through my orientation tasks for the day just so I could have some extra time to explore the documentation and experiment with the examples, and then staying up late at home to explore even further. As time went on, I advocated further usage of Ext JS for the company’s apps, wrote some (interesting…) ColdFusion custom tags that wrapped a bunch of Ext JS functionality, and even created a training session with a co-worker (who also went on to work at Sencha!) to describe how awesome and useful the Element APIs could be.

Work kept going, and I focused mostly on server-side development, completely missing out on Ext JS 3, 4 More >

Ext JS CriteriaBuilder

A few weeks ago, I had a scenario come up where I wanted to be able to filter an Ext.data.Store based on a set of criteria, part of which depended upon a value in one of my model’s associations. While this is easy enough to do via filterBy(), it can become a bit unwieldy to use, especially if you want/need the criteria to be dynamically constructed.

As I was thinking about how to best deal with this, I remembered my experiences of using ColdBox’s CriteriaBuilder, which is based on Hibernate’s API of the same name. Using CriteriaBuilder, you can–among myriad other things–produce complex queries and, because it is all DSL-based, criteria can be added in as dynamic a way as you’d like.

This inspired me to experiment with building a CriteriaBuilder for Ext JS.

CriteriaBuilder

CriteriaBuilder allows you to build complex, dynamic queries that can query any data within an Ext.data.Store, including association data. Since I was bored, I created two approaches for interfacing with CriteriaBuilder.

In the first approach, you can use a SQL-like syntax to craft your query. For example:

var cb = new CriteriaBuilder.Builder({
    store: mystore
});
var sql = 'join user u where u.lastName like "McD%" order by orderNumber ASC';
// run More >