I needed to use a locking grid and an editor in Extjs 4.1 today, and of course, there was a noted bug in the forums that mentioned that doing this would not be possible; the edit event would not fire. I really, really needed this as I had promised the customer that it could be done and to use those famous last words that it would be *easy*.

It works, but (maybe not how you want it to work) ….. Here’s what I found out:

Why it looks like the edit event is not firing:

The extjs locking grid feature actually works by splitting your single grid into two grids, one with the columns that are locked and one with the columns that are not. Now let’s think about the document object model and how extjs generates html elements for a moment, in a lot of cases you are probably using an ID property in your grid, but when the user locks a column and effectively creates two grids from the initial grid what’s left are two auto-generated IDs. You may have heard many developers preach the evils of hardcoded IDs and now finally, we have a really concrete example of these IDs causing problems.

Problem 1: You created a grid gave it an ID or action property and set up your reference and / or listener on that grid like this:

refs : [
{
    ref         :  'someGrid',
    selector    :  '#someGrid',
    autoCreate  :  true
}
]

Or  added a controller to the grid like this:

'grid[id=someGrid]':{
    edit:this.onSomeGridEdit
}

Your code will not work, this ID no longer exists in the DOM, so no events will ever be called. You WILL need to set up a controller on the grid to listen to the edit event but this controller will have to work for both grids and will have to work independent of any IDs, so here is how you do it:

'grid':{
    edit:this.onCellEdit
}

Notice that we used the xtype only so that the edit applies to both grids. Now you have to set up your onCellEdit function to handle the different columns that the user may edit, the code is below.

onSomeGridEdit: function( editor, e ){
   if(e.originalValue != e.value){
       switch(e.field){
            case 'col_header_one':
                  //do something            
            break;
            case 'col_header_two':
                 //do something   
            break;
        }
    }
}

Finally, I had a few cells that actually popped up a window and I needed to know the ID of the grid so I could *gasp* use Ext.getCmp(), ( admit it this is why you think this feature is broke :-) )to do this I just used:

this.up(‘grid’).getId();

Ok I have been doing some statistical analysis of values in arrays lately (because it’s fun!) and wanted to pass on some of the more popular equations, along with what they mean, or what they mean to tell you.

Mean – Many of you no doubt know the mean as the average of a set of numbers, you calculate this by summing the values in the data set and dividing the sum by the number of values. This seems straight forward, and the concepts below rely on the mean so it is crucial that this be calculated. Ext.Array (http://docs.sencha.com/ext-js/4-1/#!/api/Ext.Array-method-mean) has a handy way of calculating the mean value of a dataset stored in what else – an array.

In the world of probability the mean is also known as the expected value, and provides a good idea of where the next value will fall.

Variance – Now that you have the mean value of the array, you can start to look for the variance in your dataset. The variance is the measure of how far the numbers in your dataset are spread out. The baseline for this is the mean, which is also known as the expected value! Variance is calculated by taking the mean and subtracting that number from the value, then squaring the difference (between the mean and the value) for each of the numbers in your dataset. Wait! You are only half way there! Once you complete that task you should have a new dataset comprise of squared differences, now to get the variance just calculate the mean of the dataset of squared differences.

Standard Deviation – OK, now that we have worked out the mean, and the variance, what is standard deviation, and what do we plan to do with it. Before I explain, let’s take a look at the chart below:

In this chart you see the greek symbols for mean (μ)  and standard deviation (σ) . The type of curve represented by the chart above is named the bell curve. So you may be asking yourself what standard deviation is right — well, it is the square root of the variance and shows how spread out a set of numbers is. In the bell curve you can see that 34.1% of the dataset falls within -1 standard deviation and 34.1% falls within +1 standard deviation of the mean. This dataset can be categorized as normalized.

Frequency – Now let’s talk about frequency, which is commonly expressed as a histogram, or a chart that contains ‘bins’ and the number of items per ‘bin’.

Now, how do you go about calculating the values above given a set of values in a JavaScript array?

Luckily, I stumbled across some handy JavaScript snippets from Larry Battle (http://bateru.com/news/2011/03/javascript-standard-deviation-variance-average-functions/ ), and of course when you couple that with some extjs Array singleton functions you get an easy to use list of stats functions.

Average (mean)

var avg = Ext.mean(yourArray);

Variance

// Function returns variance for an array of numbers
function  variance(arr){
	// Make sure that your input is of type array
if (!Ext.isArray(arr)) {
return false;
}
	var avg = Ext.mean(arr);
	i = arr.length,
	v = 0;

	while (i--){
		v+= Math.pow((arr[i] – avg), 2 );
	}
	V /= arr.length;
	return (v);
}

Standard Deviation

function stdev(arr){
	// Make sure that your input is of type array
if (!Ext.isArray(arr)) {
return false;
}
	var sd = Math.sqrt(variance(arr));
return sd;

}

Frequency

function histogram(arrayOfNumbers){
var bins = 10,
histogramDataValues = arrayOfNumbers, // Source Values
i = 0,
over = 0,
under = 0,
binContent = [],       // Becomes the data array
delta;

var lowestNumber = Ext.Array.min(histogramDataValues),
highestNumber = Ext.Array.max(histogramDataValues),
delta = Math.abs((lowestNumber - highestNumber) / bins);

// Set the initial value of all bins to zero
// and populate the categories data based on the deltas

for (; i <= bins; i++) {
binContent[i] = 0;
histogramDataValues[i] = lowestNumber + Math.round(100 * (i - 1) * delta) / 100;
}

// Populate the bins with the
for (i = 0; i < histogramDataValues.length; i++) {

if (histogramDataValues[i] < lowestNumber) {
under++;
}
else if (histogramDataValues[i] >= highestNumber) {
over++;
}
else {
var ndata = histogramDataValues[i] - lowestNumber,
thisBin = Math.floor(ndata / delta);

thisBin = Math.abs(thisBin);
binContent[thisBin]++;
}
}
return binContent;
}