Skip to content

Archive for


Keep ExtJS TreeGrid scroll position on tree reload

I have a ExtJS 3.2 TreeGrid object that refreshes the tree content in a regular manner. The problem is the vertical scrollbar of the TreePanel jumping back to the top of tree when the TreeGrid’s loader (TreeLoader) is reloaded. However, the TreeGrid is complete different to GridPanel that you cannot use GridView to control the scroll actions, like inforum. So here is a snippet of code to maintain the vertical scrollbar position even after the content is reloaded. Read more »


Extracts non-row data with ExtJS JsonStore

Suppose you have a JsonStore object retrieving a number of records from the server and there are specific values which are the same for all the records, eg. average value.

For whatever the reason, you really just want to return these specific values separately as a field inside the JSON string, like the following: Read more »


Making Highcharts support right-click context menu

Currently, Highcharts (v2.1.4) doesn’t support (right click) context menu but this is in the feature request. Unfortunately, I don’t have the luxury to wait for the democratic process. So I did it the hard way and spent half a day to understand the Highcharts code and made the necessary changes to support right click context menu.
Read more »


Passing Javascript objects in ExtJS Store’s params and becomes PHP associative array on the server side

Suppose you need to pass a Javascript object as a parameter in ExtJS Store to PHP server side and you want to automatically convert into PHP associative array. You can simply do something like this inside the Store’s config:

baseParams: {
  "argArr[0][field1]": argArr[0].field1,
  "argArr[0][field2]": argArr[0].field2,

Read more »


How to remove comma from ExtJS CompositeField

By default, ExtJS (3.2.1) CompositeField class inserts comma between each field. However, you may want to remove the comma in some occasions, eg a group of radio buttons and one of the radio buttons next to an input field.

You can simply override a class method, buildLabel, as follows to omit the comma:

       xtype: 'compositefield',
       buildLabel: function(segments) { return segments.join(""); },
       labelSeparator: '',
       items: [{

Change ExtJS Grid rows’ background color without using CSS class

If you need to change a row’s background color in ExtJS Grid Panel without using any CSS class, you can do it like this

var grid = new Ext.grid.GridPanel({
  viewConfig: {
     getRowClass: function(record, index, rowParams, ds) {
         rowParams.tstyle = 'width:' + this.getTotalWidth() + ';';
         if (set_background) {
           rowParams.tstyle += "background-color:" + bgColor + ';';
         if (set_foreground) {
           rowParams.tstyle += "color:" + fgColor + ';';