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 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 >

Sencha Fiddle Documentation

Yes, yes, I know. It’s been over a month now since I’ve posted anything. Life is life, and all that.

Anyway, exciting stuff–the good people over at Sencha put up some documentation for Fiddle today! If you’ve ever wanted to really dig into the features that Fiddle has to offer, be sure to check out the docs.

That’s all for now–happy fiddling!

Share this:

Fiddle, Sencha Style!

I’ve blogged about this before: I really love jsFiddle, the excellent online JavaScript snippet creator/editor. One of the reasons I REALLY like it is because it allows one to use the latest(ish) version of ExtJS. One of the reasons I DON’T like it is because I have to setup the environment every time to use ExtJS. Sure, it only takes a few seconds, but wouldn’t it be great if Sencha had their own flavor?

Well, this week at SenchaCon, we saw a sneak peek (perhaps not intentional…?) of a beta version of Fiddle, an online JS snippet editor/profiler. The big pull for me, of course, is that Fiddle already knows about ExtJS/Touch, so getting setup for creating a snippet is instantaneous.


Here are some the major features:

Choose Your Framework…and Theme!

When composing a new fiddle, you can easily select from any of the currently available library versions…all the way back to Ext JS 2.3.0…whoah. Additionally, for Ext JS 4.2.x, you can even select the theme that you’d like to apply to the rendered content.

Mocking Data

Mocking data for stores and other AJAX requests is pretty slick. At the bottom of the main editing area, you’ll see the typical tabs for JavaScript, CSS, More >

ExtJS 4.2 Walkthrough β€” Part 11: Executive Dashboard

With the successful roll-out of our workflow system, management has come up with another great idea: an Executive Dashboard. The main idea is that when anyone with the “Admin” role logs in, they should be greeted with a “dashboard” of sorts that will allow them to see a variety of details from across the application, such as snapshots of the charts we previously built, outstanding workflow actions, and the most recently added inventory records.

Of course, we’ve already built all this stuff, so we confidently respond that this is no problem, and we’ll have it done in a jiffy. So let’s get jiffy-ing!

NOTE: Code for this installment can be found on GitHub.


One of the best things about the way we’ve built our ExtJS 4 app is that we can now really start to benefit from reuse of code. Instead of having to re-create all the components (charts, grids, etc), we can simply instantiate them in new contexts and move on with our lives.

For this Executive Dashboard, we’ll reuse both of the charts that we created earlier, as we all reusing the inventory grid twice. Since we’ve already created stores and models for all of these, there’s ZERO that we have to create More >