Category Archives: JavaScript

Some brief thoughts about JavaScript stuff

ExtJS CheckboxSelectionModel header deselect on reload

Today, I discovered that the CheckboxSelectionModel does not clean up after itself on a store reload. If you previously used the header checkbox that selects all records, if you reload the store for whatever reason — I reconfigure my grid with a new store all the time — the header is left checked.
I found [...]

Sprockets, ExtJS, and You: A tale of JavaScript bundling

I spent the past three days evaluating various JavaScript dependency resolution and packaging solutions, predominately on the client side. I didn’t find anything completely enamoring.
My objective is twofold. Maintain JavaScript sources using a file per class policy as a general rule. Serve the actual JavaScript portion of my application to the client [...]

Dynamic, lazy loading JavaScript packages

Many different solutions exist.

JSLoad is a Javascript file loader that [they] wrote for Instructables.

jspkg is a package loader for Javascript, based on pluggable loaders for locating and loading scripts into a client-side Javascript application. Orphaned?

The YUI Loader Utility is a client-side JavaScript component that allows you to load specific YUI components and their dependencies [...]

noop Firebug for other browsers

If you’ve left console.log statements in your code intentionally or by mistake, the following will allow a successful noop in browsers for which Firebug is either not installed, disabled, or uninstallable.

liaison.util.firebug = function() {
(function() {
if(!window.console) {
console = {};
console.log = Ext.emptyFn;
}
})();
};

Legacy horizontal menu with ExtJS

It’s easy to leverage ExtJS to build a legacy navigation menu, assuming you don’t need search engine visibility.

v.Menu = Ext.extend(Ext.Toolbar, {
 
renderTo: ‘menu’,
 
initComponent:function() {
 
this.targets = {
‘menu-button-people’:'/people’,
[...]

ExtJS, Wufoo, and form theory

If you’ve stumbled across Wufoo’s blog, you’ll notice they’ve done extensive research into online form usability, given it is their core competency. ExtJS has its own CSS for forms, but it is possible to implement some of the Wufoo form suggestions.
It’s easy to put the form labels above the field inputs:

new Ext.form.FormPanel({
[...]

Sensible form layouts with Ext.ux.layout.TableFormLayout

I think ExtJS contributor animal is quite prescient when he writes:

The vertical, linear nature of Ext.layout.FormLayout baffles first time Ext users.

The depth and complexity of the nested structure required with the traditional form layout is simply insane when building a form up declaratively. It’s essentially an enormous, massively nested data structure that’s virtually impossible [...]

loader for custom mootools classes

For posterity, I thought I’d post code I was using to initialize multiple instances of some of my mootools classes with default and DOM element specific options. Additionally, I only wanted a class to be initialized for an element actually on the page, so #filter is used.
Mootools is definitely more fun than Ext JS. [...]

Sensible remoteSort for Ext JS

If you’re managing complex model relationships like I am on the server side, you might find you need to sort on multiple columns to maintain correct ordering or perhaps because Ruby on Rails uses SELECT DISTINCT ON internally which exhibits unpredictable results when combined with PostgreSQL and LIMIT.
Presently, Ext JS will simply send the name [...]

Rails, json_serializer, associations, and you

While the JSON support in Rails has improved, at least as of 2.1.0 the serializer doesn’t take into account model overrides of #to_json. Fortunately, a patch has been introduced, although it has been staled out.
Rails 2.3.3 and possibly earlier versions of Rails 2.3 no longer have this issue.
In the meantime, I have been defining [...]