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: Read more 
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.
Read more
[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. Read more
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.
Read more
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
jQuery Mobile: The Concept of Linking Mobile Pages (2)
Scenario 3: Load mobile page from another HTML document via Ajax
Recalling the scenario 2, we can load a mobile page from another HTML document using a normal HTTP request. This is the simplest way to load an external mobile page because any custom JavaScript code (e.g. pageinit handler code) can be put inside the <script> embedded inside the HTML <head> section. So once the document is loaded with HTTP request, the pageinit bind event code is also guaranteed to be run for all the mobile pages in that document. The downside is that we don’t get animated page transition because the previous DOM has been destroyed from the new document load. Read more
