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:

News/Events/Stocks Ticker for ExtJs 4

Ticker class for ExtJs 4 creates a messages scrolling component that can move horizontally from left to right or vice versa, or even vertically moving from top to bottom or vice versa. This component can be used as a stocks, news or events ticker. The class offers a number of flexibilities and features. Here are some of them:

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.

[Updated] ExtJs 4.1.1: Using multiple fields inside a row editor cell for editing large values

Awhile ago, I have written on how to treat a row editor field with multiple form fields. However, the solution wasn’t working nicely (and also quite buggy) with the latest ExtJs 4.1.1. This post shows you a working example with row update.

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.

Learning Highcharts book – online demos

The kindle version for “Learning Highcharts” is out now. Here is also the link for the online demos of all the examples from the book.

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.

Using PhantomJs to download jsFiddle.net code

I think jsFiddle is great but it is generally lack of simple functions like download (and fiddles management) to get the code into HTML file. Here, I have come up a workaround solution using the awesome PhantomJs to pack each part into an HTML file. At the moment, the code only translates the jQuery library selection but that is a proof of concept, it can be done. Save me doing cut & paste manually.