ExtJS Javascript Library for Beginners!

While working on my usual project at work I encountered the need to solve the problem of having check boxes display in a vertical list, across several columns from a non numerically indexed PHP array. I came up with two solutions; one used Ext JS and one was plain PHP with some CSS thrown in for good measure. One thing I noticed was that this task is not as easy as it seems.

Take for example the following array.

$list =   array('AL'=>"Alabama",
'AK'=>"Alaska",
'AZ'=>"Arizona",
'AR'=>"Arkansas",
'CA'=>"California",
'CO'=>"Colorado",
'CT'=>"Connecticut",
'DE'=>"Delaware",
'DC'=>"District Of Columbia",
'FL'=>"Florida",
'GA'=>"Georgia"

... and so on

I won’t paste the entire code as it’d just waste space.

To get that into a 4 column list proved rather tricky.  My first attempt was using an Ext.FormPanel, combined with PHP to generate the array. Not a glamorous solution by any means but it worked .

Here’s the code. It’s pretty self explanatory. are in mind the list variable from above.

<script>

/**
* here we loop our $list variable creating some JSON objects
* which match the specification for an Ext.Checkbox
* The PHP you see just stops the last , being added to the list, IE chokes on that!
*
*/
var _list_items = [
< ?php $lastKey = count($list); $i = 0; foreach($list as $program_id => $program_name): $i++?>
{
boxLabel: '< ?php echo ucwords($program_name);?>',
name: 'programs[]',
inputValue : '< ?php echo $program_id;?>'
}< ?php echo ($i !== $lastKey) ? "," : "";?>
< ?php endforeach;?>
];

Ext.onReady(function(){

/*
Create our FormPanel variable in the usual panel way.
*/
var _fp = new Ext.FormPanel({
renderTo: Ext.getBody(),
frame:true,
title : 'States',
method: 'POST',
url : 'post.php', // dummy page, which spits back the variables passed through
width: 795,
autoHeight:true,
bodyStyle : {
padding: '10px'
},
/**
After seeing the examples of this it's pretty easy, the one thing to rememember is if you don't want a random
Colon (:) to appear in the top left when you enter no fieldLabel, use hideLabel, I think there's a bug for the Ext Boys.

*/
items : [{
xtype: 'checkboxgroup',
hideLabel : true,
id : "program_checkboxes",
itemCls: 'x-check-group-alt',
columns: 5,
vertical: true,
items: _list_items // our php generated list.
}],
// add some funky buttons. bbar is such a cool config option!
bbar : [
'->',
new Ext.Button({
text : 'Clear',
handler : function(){
_fp.getForm().reset();
},
style : {
display: 'inline',
margin : '0px 5px'
}
}),
new Ext.Button({
text: 'Save',
style : {
display: 'inline',
margin : '0px 5px'
},
handler: function(){
if(_fp.getForm())
{
_fp.getForm().submit();
}
}

})]
});
});

</script>

So that should be sufficient to get your Ext.FormPanel displaying check boxes vertically. What surprised me though, was the amount of processing it took to render! Reloading that simple script caused my Firefox to freeze on several occasions. Not sure why!

Anyway here’s how it looked;

After the serveral crashes I decided to try some PHP to lighten my mood.  The solution I came up with is a little tricky to get your head around but, is very flexible, and doesn’t crash the browser so much. All it takes is a little PHP and CSS.

<div id="form-container">

< ?php

// set the maximum columns as a hard limit.

$max_cols = 4;

// determine how many rows to output per column
$perCol = round(ceil(count($list) / $max_cols));

// create two numerically indexed array of keys and values.
// this is important, because our initial array is indexed by strings, we need to re index them.
$names = array_values($list);
$ids = array_keys($list);

// now its a simple case of looping and creating a column out of a div each time.
?>

< ?php for ($i = 0; $i < $max_cols; $i++):?>
<div class="programcol">
<ul>
< ?php for ($js = 0; $js < $perCol; $js++):?>
< ?php if(strlen(current($names)) > 0):?>
<li>
<input type="checkbox" name="programs[]" value="<?php echo current($ids);?/>">
<label>< ?php echo ucwords(current($names));?></label>
</li>
< ?php endif;?>
< ?php next($names); next($ids);?>
< ?php endfor;?>
</ul>
</div>
< ?php endfor;?>
</div>

< ?php
/**
* We loop down each time, iterating the array in sections, making a column out of each section.
* I'm sure this can be improved upon!
*/
?>

That generates the divs’ holding a list of columns, now to sprinkle on a little CSS to get the vertical styling.

<style>
body
{
font-family:tahoma;
font-size:10px;
}

#form-container
{
width:795px;
min-height:250px;
max-height:500px;
float:left;

}

.programcol
{
float:left;
width:195px;
height:auto;
text-align:left;
display:inline;
clear:none;

}

.programcol li
{
margin: 4px 0px;
height:12px;
padding:0.25em
}

.programcol li label
{
margin-left:4px;
position:relative;
top:-2px
}

</style>

…and we’re all good, we have vertical checkboxes across several columns! viola

Hope you liked this.

James