Skip to content

Archive for


Using jQuery.each() on a mutating list

Suppose we have a scenario that an array variable (let say ‘master’) contains a list of objects. Each of these objects internally has a reference back to the variable array, so that it’s remove function can remove itself from the owner array.

If we use jQuery.each() to call the remove function on that list, such as:

$.each(master, function(idx, item) {

then it will result with error because we will end up calling the remove function on an object that is already removed. Read more »


ExtJs 4: Using multiple fields inside a row editor cell for editing large values

[For an update version of this post, check here]

Suppose we have a grid panel with store object holding very large values. We can use column’s renderer to format the large value into readable form. However, when it comes to editing the real value, it is cumbersome to modify with a string of digits. Especially, for applications only require 2 to 3 significant figures accuracy. In another word, we can easily display the value of ‘1.23 B’ or ‘1.23 bil’ instead of 1230000000 but in row editor it reflects the real value behind the store record. Of course, we can use ‘textfield’ and put in some checking and conversion process in between but this may require writing quite a bit of code.

Here is an alternative, we can display two separate edit fields: one number field and one combo box for units inside a row editor cell. In my opinion, this way is neater and more user friendly. Below is a screenshot with ExtJs 4.1 :


You can see the demo in
Read more »


How to plot a horizontal gauge chart in Highcharts

It is simple to plot a horizontal gauge chart. The main concept is a chart with single bar and the whole plot area is restricted to the size of the gauge. Here is a screenshot of the horizontal gauge chart

Read more »