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:

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

Highcharts Extension for ExtJs 4: Supports animation & Highcharts 2.3

If you have any issues or questions using this extension, please go to github and submit a question.

The Highcharts Extension (v2.0) for ExtJs 4.1 is here in the github. It has a lot of major features:

- Support Highcharts 2.3: Gauge, Polar and Range charts

- Support animation for all the charts: initial, update and line shift.

- A lot of optimisation is done.

PS: More documentation to come.

ExtJs 4: Using multiple fields inside a row editor cell for editing large values

[For an update version of this post, check here]

Suppose we have a grid panel with store object holding very large values. We can use column’s renderer to format the large value into readable form. However, when it comes to editing the real value, it is cumbersome to modify with a string of digits. Especially, for applications only require 2 to 3 significant figures accuracy. In another word, we can easily display the value of ’1.23 B’ or ’1.23 bil’ instead of 1230000000 but in row editor it reflects the real value behind the store record. Of course, we can use ‘textfield’ and put in some checking and conversion process in between but this may require writing quite a bit of code.

Here is an alternative, we can display two separate edit fields: one number field and one combo box for units inside a row editor cell. In my opinion, this way is neater and more user friendly. Below is a screenshot with ExtJs 4.1 :

Demo

You can see the demo in joekuan.org.

ExtJs 4 extension for Highcharts: passing null values

In Highcharts, to distinguish whether there is a data point of zero value or no data at all is by passing null values. There are two ways to pass null values from server side JSON to the ExtJs store. First is to literally having null values assigned in the JSON data or leave the field value in the JSON data undefined, e,g.

Animation on ExtJs 4 login screen – Sliding background

I was experimenting some animation for a login screen. Here is a video of my first try – a sliding background login screen.
.

Create a password prompt dialog box on ExtJs 4

I couldn’t find a way to create a prompt message box with password input field. Ext.Msg.prompt is really another way to call Ext.Msg.show with configuration object. Unfortunately, it doesn’t support inputType config option, like the textfield component.

Creating a login page with ExtJS 4

This post is the ExtJs 4 update of my other post of ‘Creating a login page with ExtJS‘ which is based on an older version.

Added Donut Chart support for HighChart ExtJs 4 extension

Donut Chart support is added to the latest HighChart ExtJs 4 extension. The code and an example are included in my latest github. You can also try the demo in joekuan.org. The example uses the same dataset as demonstrated in original Highchart example.