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:
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
Click here for tutorial and API documentation in Sencha style.
For online demo, click here
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.
[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 :
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. Read more
I was experimenting some animation for a login screen. Here is a video of my first try – a sliding background login screen.
. Read more
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.
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. Read more