How To use GroupHeaderGrid Ext JS plugin

GroupHeaderGrid is a custom plugin that implements support for grouping columns in a grid. When you are serious about using ExtJS on your application, I am sure many of you will come across this requirement where you need to group the column headers in display of records. The plugin do not have specific site but was born out collaboration in the Ext Js forum. It all started with this thread. We will have look at how to use the plugin and some simple examples.

Getting the Plugin
You can find few versions listed and available for download in this thread. I will use the plugin the latest version (1.4) which is for Ext JS 3.0. The plugin comes with a CSS and javascript file. The zip file also contains an example.

Installing and Using The Plugin
Installing the plugin is simply copying the script file and CSS file in appropriate directory. These need not be added into the Ext JS folder ( I usually keep the distribution un-touched) and keep separate folders for my extensions and generic components. For example, lets consider a yearly report for a group of companies. The monthly turnover for each subsidy is displayed in the grid. Now, we need to separate data for each quarter.

To use the plugin with the grid you need to create an instance of the plugin and add it to the grid. Here is code snippet for our example:

...
plugins: [new Ext.ux.plugins.GroupHeaderGrid({
rows:[ [                    
{},
{header: 'Q1', colspan: 3, align: 'center'},
{header: 'Q2', colspan: 3, align: 'center'},
{header: 'Q3', colspan: 3, align: 'center'},
{header: 'Q4', colspan: 3, align: 'center'}                    
]]
})]
...

The rows attribute is most important field for the GroupHeaderGrid class. We specify all the header information as rows. In our example, we have only one level of grouped header. The first column ie, Subsidiary is not grouped. The other 12 columns are grouped into quarters. For each grouping we provide the header's label and column span. In the above example, I have provided the header label, column span and text alignment.

If you have another layer of grouped headers, you will have to add an array into the rows attribute. As per the Ext JS forums, the plugin supports unlimited number of headers. I have used only 2 levels so far. Here is the complete example code:

Ext.onReady(function() {
new Ext.Viewport({
layout: 'border',
items: [{
region: 'center',
xtype: 'grid',
title: 'Yearly Report',
store: new Ext.data.SimpleStore({
fields: ['Subsidiary','Jan', 'Feb', 'Mar', 'Apr', 'May',
'Jun', 'Jul', 'Aug', 'Spt', 'Oct', 'Nov','Dec'],
data: [
['OGC', 2300, 4200, 105600, 5000, 15000, 
7000, 8000, 9100, 10000, 11000, 4000, 5000],
['OGH Ltd', 2100, 6700, 209000, 5000, 500,
7800, 8000, 9600, 10600, 11000, 67000,234000],
['T-DEL', 2320, 7100, 240000, 5800, 7500,
7000, 8500, 9200, 10000, 13400, 3300,24000],
['OGC-I&E', 22000, 2300, 1500, 5000, 8300,
7500, 8000, 99900, 10000, 17300, 21000,76000]
]}),
colModel: new Ext.grid.ColumnModel({
columns: [
{header: 'Subsidiary', dataIndex: 'Subsidiary'},
{header: 'Jan', dataIndex: 'Jan'},
{header: 'Feb', dataIndex: 'Feb'},
{header: 'Mar', dataIndex: 'Mar'},
{header: 'Apr', dataIndex: 'Apr'},
{header: 'May', dataIndex: 'May'},
{header: 'Jun', dataIndex: 'Jun'},
{header: 'Jul', dataIndex: 'Jul'},
{header: 'Aug', dataIndex: 'Aug'},
{header: 'Spt', dataIndex: 'Spt'},
{header: 'Oct', dataIndex: 'Oct'},
{header: 'Nov', dataIndex: 'Nov'},
{header: 'Dec', dataIndex: 'Dec'}
],
defaultSortable: true
}),
plugins: [new Ext.ux.plugins.GroupHeaderGrid({
rows: [[                    
{},
{header: 'Q1', colspan: 3, align: 'center'},
{header: 'Q2', colspan: 3, align: 'center'},
{header: 'Q3', colspan: 3, align: 'center'},
{header: 'Q4', colspan: 3, align: 'center'}                    
]]
})]
}]
});
});

And that's it for now.

Read other ExtJS related articles!

Installing MySQL Workbench on Ubuntu 9.10

MySQL Workbench is a GUI tool for MySQL database for running queries, data modification and visual design of database. The community version of the software is distributed under
GPL license. Install the application was quiet simple on Ubuntu but it has some catch that I though it's better to share.

Getting MySQL Workbench
Downloading the application is very simple. Both development and GA release is available on MySQL website. I downloaded the latest GA release which is Workbench 5.1.18a. Select "Ubuntu Linux" from the platforms selection and you will be presented with both 32-bit & 64-bit versions. Also, the versions available are designated for Ubnutu 8.04 & Ubnutu 9.04. I downloaded the 32-bit version for Ubuntu 9.04 for installation.

Installing MySQL Workbench
Installing the application is also simple. If you use Gnome, you can simply double click the downloaded deb file and Package Installer will take care of checking dependencies and proper installation. If you prefer the command line you may use the dpkg command and install as follows:

sudo dpkg -i mysql-workbench-oss-5.1.18a-1ubu904-i386.deb

Once installation is complete, you will be able to access the application from Gnome menu as Applications - > Programming -> MySQL Workbench. You will have no trouble loading the application. But once you try establishing connection with your MySQL server you get an error message as follows:

Couldn't load library libmysqlclient_r.so:
libmysqlclient_r.so: cannot open shared object file: No such
file or directory

To fix this you need to create a symbolic for libmysqlclient library. The symbolic link can be created as follows:

sudo ln -sf libmysqlclient_r.so.16.0.0 libmysqlclient_r.so

I had two versions of libmysqlclient version 15 & 16. I created symbolic link for the latest version. And once you are done, re-launch the application it should work fine.

Handling calls in Windows Mobile

Last two weekends, I ventured into different kind of project. Away from web application frameworks, Java technology.. I entered into Windows mobile application programming.I decided to play with my HTC HD. My first intention was to play around the TouchFlo interface, but my mind caught on the idea of handling calls on mobile. I decided to make an application that will ignore calls from unwanted callers. Or simply hang up calls that I don't want to receive! Here is how it was built.

To start with I created a Visual C#, Smart Device project in Visual Studio. After playing around, I found that I need TAPI API in order to handle the phone calls. For my project, I used OpenNETCF.Telephony library. You will have to download the library source and build it. Also remember to add the dll into our project's Reference.

Well, I wouldn't explain the UI or other functionalities in this article. Let discuss about handling the call.

Monitoring and Getting the call
In order to handle calls, you will have to use the TAPI library. The first thing you will need to do is initialize the Telephony class provided by the OpenNETCF.Telephony library. Our requirement is to monitor and handle the incoming calls and get its information. Upon receiving any incoming call, my callback function is called where I have the necessary logic to hang up. The code below shows how to Initialize Telephony class, get the incoming calls and register the callback function.

Telephony tapi = new Telephony();
tapi.Initialize();
CellularLine cl = tapi.CellularLine(MediaMode.InteractiveVoice, CallPrivilege.Monitor | CallPrivilege.Owner);
cl.NewCall += new Line.NewCallHandler(callAction);

The Telephony class is initialized using the Initialize method. The CellularLine method gets the voice calls with monitor and owner privileges and finally, the NewCallHandler register callAction method as the callback function.

Handling the call
The callback function will have to code to handle all the incoming calls. During my venture, I tried different call manipulations. The most simple activity was to reject all the calls that I received. The call rejection was done using the API provided by the library itself. Below is my simple call rejection method:

void callAction(Call call) {            
call.Hangup();
}

Well this may not be the case always. My intention was to reject calls from specific numbers. So, I put some conditions into the callAction methods and spiced it up. The phone numbers are read from a simple text file in my mobile phone and loaded into an array when the application starts. When I receive each call, the numbers are checked and actions taken.

Getting call information
I found different ways to get call information. I could use the .Net Compact Framework's SystemState properties or use TAPI library's CallInformation class. In my application I used the SystemState properties as below:

if (checkNumber.CompareTo(SystemState.PhoneIncomingCallerNumber.Trim()) == 0)  {
call.Hangup();
}

The PhoneIncomingCallerNumber return empty string when there is no incoming call. When you get an incoming call, the variable gives you the caller's number.

Trouble and Conclusion
I initially planned to release the complete project code along with the article. But, I decided to release it later due to few troubles I have with the application. Even though the application handles the call, I did notice some glitches. My trouble is I am yet to solve those bugs. I observed some strange behaviour and have not got any response to my discussions at the codeplex or stackoverflow websites.