ExtJS Javascript Library for Beginners!

Following on from the previous post about vertical check box lists, here’s a little addition I made to add 3 buttons at the bottom, one to select all, one to select none and one to perform some kind of AJAX update.
I don’t quite know why this took me a while to figure out, but I thought it’d be worth sharing with the masses of readers I get to this blog, yeah right!

First the 3 buttons to perform the actions.

<div style="text-align:right;margin:5px;clear:left"><input id="select_none" onclick="selectNone();" type="button" value="Select None" />
<input id="select_all" onclick="selectAll();" type="button" value="Select All" />
<input id="update_button" onclick="update_charts();" type="button" value="Update Graphs" /></div>

Easy enough, we’re going to implement the select all and select none operations first. I use the onclick attribute because, well you’ll see don’t like calling an elements click() handler when it hasn’t actually been clicked!

function selectAll(){
var checkboxes = Ext.query('input[id*=state_]');
Ext.each(checkboxes, function(obj_item){
obj_item.checked = true;
});

Ext.getDom('update_button').disabled = false;
}

function selectNone(){
var checkboxes = Ext.query('input[id*=state_]');
Ext.each(checkboxes, function(obj_item){
obj_item.checked = false;
});

Ext.getDom('update_button').disabled = true;
}

Two features I love here are the Ext.getDom() method and the query with the wildcard (*=) pattern match. great stuff Ext team!

Now for the coolness, I wanted to write 1 block of code, which would add the event handler to each checkbox and take care of enabling / disabling the update button for me. Here’s what I came up with:

// add disabling / enabling code.
Ext.onReady(function(){

// clear the check boxes , this is why it's a separate function
selectNone();

// add a click event handler to each checkbox.
var checkboxes = Ext.query('input[id*=state_]');
Ext.each(checkboxes, function(obj_item){

Ext.get(obj_item).on('click', function(event, checkbox){

up_button = Ext.getDom('update_button');
if(checkbox.checked == true){
if(up_button.disabled = true)
up_button.disabled = false;
}
else
{
if(Ext.query('input:checked').length == 0) // great place to use the selectors
up_button.disabled = true;
}
});
});
});

This code handles the disabling and enabling, it’s really simple to understand too, I’m pretty sure jQuery could do this with less code, due to it’s method chaining abilities. One thing I would have loved to do is this, but I don’t think it’s possible:

// apply handler direct from the query() method. You can do this with jQuery.

var checkboxes = Ext.query('input[id*=state_]').on('click', function(event, checkbox){

up_button = Ext.getDom('update_button');

if(checkbox.checked == true){
if(up_button.disabled = true)
up_button.disabled = false;
}
else
{
if(Ext.query('input:checked').length == 0)
up_button.disabled = true;
}
});
});

Alas, it was not possible so I forfeit 1 extra line of code to get something working right, not a big deal really eh?

James @twitter