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

How to Embed Twitter Widget into ExtJs Panel

In order to embed Twitter page into ExtJs Panel, we need to first create a Twitter Widget. Go to Twitter account page, select Settings/Widgets.

How to create HighStocks area range chart for ExtJs

Here is an example of using the Highstocks extension for ExtJs 4 to create an area range stock chart.

First, there is a minor bug in the Highstocks extension that the property name for specifying the series type is ‘series.plot‘, not ‘series.type‘.

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

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:

Highcharts selection event callback: exposing mouse event clientX & clientY info

I have been manually doing this change in my own versions of Highcharts for couple years and it is not been done in the latest version (pre 3.0). This minor feature probably too trivial to consider. However, after recent discussion with Torsein, he thinks this is a good idea and it will be put in Highcharts 3.0 code base.

How to scale complex SVG image with CompositeSprite in ExtJs 4.1

Suppose you have created a complex SVG image using Ext.draw.CompositeSprite which contains a group of Sprite objects with the same group id. To translate the whole set from one position to another is easy. However, extra care is needed if you want to scale a CompositeSprite object.

StoreMenu for ExtJs 4 – a dynamic toolbar menus created from the Store

I have been maintaining and enhancing StoreMenu for ExtJs 3 but never got the time to update the extension for ExtJs 4. Here it is, a complete rewrite and native implementation for ExtJs 4.

Click here for tutorial and API documentation in Sencha style.

For online demo, click here

Learning Highcharts – A book shows you what you can do with Highcharts

Highcharts is an HTML 5 JavaScript charting library which offers stunning graph presentation, highly flexible configurations, APIs and events, a great selection of different types of charts.

Here is my first published book, Learning Highcharts, showing you what you can do with Highcharts. This book contains :

• a step by step guide from simple to presentable charts
• a missing manual on topics such as: chart layout policy, color shading, etc
• application demos with dynamic and interactive charts using Highcharts APIs and events
• a guide to setup Highcharts running on the server-side
• application demos with mobile web framework jQuery Mobile and desktop Rich Internet Application framework Ext JS
• many examples of charts with series types: line/spline, area spline, column, bar, scatter, pie, gauge, polar, area range and column range
• even more examples on charts with specific configurations such as: projection line chart, stacked mirror chart, horizontal gauge chart, and much more

Highcharts Extension for Sencha ExtJs 4 and Touch 2

Here is a new version of Highcharts extension which now supports both Sencha products: ExtJs 4 and Touch 2. That means the latest extension is in a new github repository, Highcharts_Sencha, whereas the old Highcharts_ExtJs_4 becomes obsolete. Nothing have been changed in terms of programming, you use the extension the same way in both Touch 2 and ExtJs 4.