the singularity of being and nothingness
JavaScript
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 > Exploring Ext.draw.Color
Jan 16th
A while back, I stumbled upon a nice little class in Ext JS: Ext.draw.Color. It’s pretty much what it sounds like: a helper class for dealing with color (shocking!). Behind the scenes, Ext.draw.Color represents an RGB color, but provides a number of helpful methods for transforming the color, such as changing luminosity, converting to HSL values, etc. I can’t sleep right now, so I thought it might be interesting to show a few examples of this in action.
The Proverbial Hello World of ColorOf course, the natural place to begin is at the beginning, so let’s create a color. There’s not much to it. While there are a few other ways to go about it, we’ll use the handy create() method. You can pass a variety of “colorish” arguments to it to create your color. For example, let’s say we want to create the CSS color “yellowgreen”. We can do so in many ways:
- An array of RGB values – [154, 205, 50] // yellowgreen
- Positional RGBA args – 154, 205, 50, 1 // yellowgreen
- Hex color – #9acd32 // yellowgreen
- CSS RGB syntax – rgb( 154, 205, 50 ) // yellowgreen
- CSS RGBA syntax – rgba( 154, 205, 50, 1 ) // yellowgreen
- CSS color name – yellowgreen
Here’s an example using More >
Ext JS 5, Sencha Fiddle and Parse.com
Nov 25th
As I’ve used Sencha Fiddle, I’ve really come to enjoy how simple it makes testing ideas, exploring aspects of Ext JS, and debugging my code. One of the really nice features is the ability to simulate AJAX requests. While this is REALLY nice for simulating the loading of remote data, one place where it has a gap is in testing a fully-rounded workflow…for example, loading data from the server, modifying it, sending it back to the server, and receiving a successful response.
For these kinds of tasks, there a few options. First, you can set up your own server which your Fiddle code can talk to, either via CORS or JSONP. While this works, it’s a pain. Most of the time the stuff I’m doing in Fiddle is not that involved, so having to mess with a server just for remote communications is a little onerous.
Another option is Parse.com. Using this service, you can create and manage cloud-based data structures. And using their RESTful API, you can retrieve this data, as well as all the other standard CRUD operations.
Integrating Parse.com with your Ext JS app (or Sencha Touch app) is RIDICULOUSLY easy. I’m going to assume you’ve already set up your 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:
