Skip to content

Posts from the ‘Ajax/Ext-JS’ Category


ExtJs: Simple way to setup ‘All’ checkbox to reflect other checkboxes status across the row in a Grid Panel

Suppose you have a number of checkboxes (checkcolumn) for each row in a GridPanel and an ‘All’ checkbox to control & reflect the status of other checkboxes in the row, i.e.

  • Uncheck any box will also uncheck the ‘All’ checkbox
  • When all the checkboxes are checked, the ‘All’ checkbox is automatically checked

Read more »


Building ExtJs/Highcharts Application with Sencha Cmd 4 Tool

Here is a blog showing you how to build application with the Highcharts extension using Sencha Cmd 4 tool. First of all, we generate ExtJs 4 application skeleton with the following command example:

~/bin/Sencha/Cmd/ -sdk extjs4 generate app SenchaCmd4Demo sc4demo

Next we copy (don’t use symbolic link) the whole ‘Chart’ directory into the application directory.

cd sc4demo
cp -fr {path}/{to}/Highcharts_Sencha/Chart .

Read more »


Building ExtJs/Highcharts Application with Sencha Cmd 5 Tool

A number of users have asked me how to build ExtJs application with my Highcharts extension using Sencha Cmd tool. I have been ignoring this question with the excuse of way too busy. Now, my new book is done and I am going to address this here. The aim of this article is to demonstrate that the extension does work with sencha command tool.

Lets start off by generating an ExtJs 5 application with the following sencha command:

sencha -sdk extjs5 generate app HighchartsSenchaDemo hcExtJsDemo

Read more »


ExtJs 3 & 4 TreeGrid Component: adding grid line style and highlighting expanded nodes/rows

ExtJs 3 TreeGrid style

In ExtJs 3, a default TreeGrid has no cell grid lines. This article demonstrates how to improve the style and fix the hidden column alignment. The following is a ExtJs 3 TreeGrid screenshot with default style showing network usages:

Default TreeGrid style

Read more »


Activates ExtJs HtmlEditor textarea when it is loaded

To make sure ExtJs htmleditor’s text area is automatically activated when it is loaded up. Do the following:

hideLabel : true,
labelSeparator : '',
name : 'description',
xtype : "htmleditor",
listeners : {
  initialize : function(editor) {

Making ExtJs (Submenus and Portal) iPad and iPhone friendly

As far as I know there are two main areas in ExtJs applications that need some works for making it touch devices (such as iPad and iPhone) friendly. One area is where the components rely on mouse hover actions such as submenus, whereas the other one is the general drag & drop (DD) motions. For mouse hover actions, only a simple configuration is required. As for drag & drop, simply includes touchHandler code will do the trick. However, application such as portal requires workaround to make sure the portlet title bar supporting DD and at the same time the tool buttons in the title bar response to touch actions. Read more »


Simple GUI messages handling with ExtJS 3

I need to have a very simple object to handle all the GUI messages in one single file which is for the purposes of simple extension on internationalisation. Also I can just hand the messages file to someone easily to correct my crappy english and plug back in the application. The code also handles message formatting using Ext.Template class. Read more »


Enhance ExtJS Ticker with Store support

I need a ExtJS ticker and I found someone posted the code in the sencha forum which has an online demo. However, I need a number of extra features which are not supported. So again I have modified the code. Couple of the features are inspired by Mioplanet’s news ticker. Here are the main features:

  • option for ExtJS Store object
  • visually enhance with color labels
  • ticker pauses when mouse hovers over
  • support categorised message type such as: Warning, Info
  • click event handler support for messages Read more »

ExtJS: note on using autoLoad

Part of my web application is to construct a html document with embedded graph images. Once the document is created, a Panel component uses autoLoad property to load & display the content. However, the rendering inside the component is different to a browser displaying the html document. The ordered list tag < ol > is missing. Read more »


Creating a login page with ExtJS

I need to polish up the login screen of my ExtJS application and come across the
WordPress style login designs which gives me some ideas. Here is my first design of the login page using ExtJS.

Read more »