the singularity of being and nothingness
ExtJS
Ext JS CriteriaBuilder
May 21st
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.
CriteriaBuilderCriteriaBuilder 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 > Ext JS: Speech Recognition Wrapper
Feb 16th
On Friday, I saw a write-up on using the Web Speech API for capturing and transcribing speech. I was inspired to see how this could be incorporated into Ext JS, so I started exploring.
First, I discovered that you can already add the x-webkit-speech attribute on a text field, and it will automatically create an audio-capture-ready text field in Chrome. All you have to do is hook up listeners to handle particular events. While this was promising, I found a big problem: if you try this in Canary, you’ll be greeted with a nasty deprecation warning. Apparently, Chrome will eventually be ditching the input-support in favor of full-on use of the JavaScript API.
No matter, that’s more flexible anyway. Based on this conclusion, I dove into the API and created an Ext JS wrapper that supports interactions with the Web Speech API. You can try out an example, and grab the source on GitHub.
About the APIThe API has a fair amount to it, so I’ll highlight some of the configuration options, as well as describe a bit about the results, which can be a bit confusing.
Configuration- continuous: If false, you get a one-shot stab at capturing audio. Once the audio is no longer detected, the capture More >
Sencha Fiddle 1.1 Released
Feb 6th
Awesome news today–a new version of Sencha Fiddle was just released! This version (1.1) has a bunch of new goodies included in it, some of which really add benefit to the tool.
I’m not going to rehash all the features (you can read those here), but I’ll highlight the…er…highlights 🙂
Improved SearchThe search in the prior version of Sencha Fiddle was pretty basic. It worked, but could only get you so far. The updates to search in 1.1 make it incredibly easier to search by multiple criteria, as well as controlling the sort order of the results. You can still search by simple keywords, but the advanced search really allows for some more fine-tuning of results.
In the future, I’d like to see some enhancements in the way of being able to clear search criteria, as well as even being able to save search criteria sets…but for the time being, the new search is a very big improvement!
Downloadable FiddlesI think this enhancement is especially nice. Fiddle 1.1 now includes the ability to download your fiddle as a standalone “app” of sorts. Basically you get a zip archive that includes an HTML file, an app.js, as well as any other files that More >
Ext JS 4: Demystifying Grid Paging
Jan 25th
Between the Ext JS forums and Stack Overflow, there are LOTS of questions that get asked about grids, and for obvious reasons: the data grid is one of Ext JS’s most powerful data-driven components.
With new developers especially, I see a common question asked quite a bit about a pretty standard bit of functionality: the “paged” data set. In this post, I’m not going to necessarily go into all the nuances of *how* to configure a paged grid in Ext JS (there are plenty of docs for that). Rather, I want to focus on *what* paging in an Ext JS grid is, and how it relates to the server.
What It Isn’tThe most important rule to understand when dealing with paging data from a remote data set is that Ext JS grids–regardless of how powerful they are–are STUPID. By this, I don’t mean that they are poorly built, or that they lack features, don’t work, or anything like that. Rather, I simply mean that when it comes to the data you are asking them to display, they are completely ignorant. When you configure an Ext JS data grid to display (and page) remote data, you will be lost if you think that More >
Ext JS: Custom Event Domains and Complex Controller Event Selectors
Dec 15th
A while back, I did a post on creating a custom Event Domain in Ext JS. If you’re new to the concept, Event Domains in Ext JS are simply classes that fire events which your controllers can listen to. The awesome part about domains, however, is that the “domain” of the events getting fired within your application are grouped together by type (read domain). This allows for very granular control over the event listeners that you construct in your controllers.
For example, the boilerplate for your controller since Ext JS 4.2.1 should now look something like this:
Ext.define('CustomController', {
extend: 'Ext.app.Controller',
init: function() {
this.listen({
controller: {},
component: {},
direct: {},
global: {},
store: {}
})
}
})
Ext JS comes with the 5 domains bolded above, and as we saw in the last post that you can create your own rather easily. In the example I shared, I created a custom event domain for “proxy”. With this custom domain setup, Ext JS will now monitor all events fired by the Ext.data.proxy.Proxy class, and our controllers can easily listen to those events and do whatever we need them to do. Pretty slick.
A Little FancierAs nice as this works, I recently came across a scenario where I wanted a bit more More >
Sencha Fiddle Documentation
Oct 10th
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: Sencha Fiddle 1.0.0 RC
Aug 25th
Sencha recently released some nice enhancements to Sencha Fiddle, a browser-based sandbox for experimenting with the Ext JS and Sencha Touch frameworks (see my previous post about the features). The best way to learn about the new features is to experience them for yourself, but here’s a quick run-down of some of the more interesting changes:
Bug FixesA few of the more show-stopping bugs have been fixed, including:
- You can now search for your own fiddles by author (e.g., author:existdissolve)
- Creating “data” tabs now successfully save as a part of the fiddle
- Some “un-indexed” fiddles are now back into the search results
If this is your first time visiting Sencha Fiddle in a while, you’ll notice that it’s gotten a significant face-lift. Gone is the bluey-blueness of the Neptune theme, and in its place is the new-ish “Charcoal” theme. It’s still distinctively “Neptune” in the aesthetic, but the contrast of the lime and charcoal are much more tolerable, IMO, than the unrelenting blue of stock Neptune 🙂
Sharing OptionsOriginally, Sencha Fiddle beta offered sharing for Twitter and Facebook. This has now been expanded to include Google+. Hooray!
Additionally, you can now also grab an embed snipped for using on websites (see example More >
Sencha Fiddle Forum is Now Open!
Jul 28th
Hopefully, you’ve had a chance to check out Sencha Fiddle, the brand-new jsFiddle-style online tool from Sencha that makes creating an Ext JS or Sencha Touch snippet, test, or debugging script quick and easy. Since my previous post about Sencha Fiddle, the team has rolled out a number of bug fixes (data tabs save now!!), which make it that much better to use.
But even cooler, Sencha has opened up a forum dedicated to Sencha Fiddle. So if you find a bug, have a question about using Sencha Fiddle, or just want to suggest how it could be better, head on over and get involved. You can even now use BBCode to embed fiddles directly into any forum posts…pretty sweet!
See you there 🙂
Share this: Fiddle, Sencha Style!
Jul 19th
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 DataMocking 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
Jul 14th
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!
StrategyNOTE: 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 >
