Activates ExtJs HtmlEditor textarea when it is loaded

To make sure ExtJs htmleditor’s text area is automatically activated when it is loaded up. Do the following:

hideLabel : true,
labelSeparator : '',
name : 'description',
xtype : "htmleditor",
listeners : {
  initialize : function(editor) {
    editor.focus();
  }
}

Making ExtJs (Submenus and Portal) iPad and iPhone friendly

As far as I know there are two main areas in ExtJs applications that need some works for making it touch devices (such as iPad and iPhone) friendly. One area is where the components rely on mouse hover actions such as submenus, whereas the other one is the general drag & drop (DD) motions. For mouse hover actions, only a simple configuration is required. As for drag & drop, simply includes touchHandler code will do the trick. However, application such as portal requires workaround to make sure the portlet title bar supporting DD and at the same time the tool buttons in the title bar response to touch actions.

Simple GUI messages handling with ExtJS 3

I need to have a very simple object to handle all the GUI messages in one single file which is for the purposes of simple extension on internationalisation. Also I can just hand the messages file to someone easily to correct my crappy english and plug back in the application. The code also handles message formatting using Ext.Template class.

Enhance ExtJS Ticker with Store support

I need a ExtJS ticker and I found someone posted the code in the sencha forum which has an online demo. However, I need a number of extra features which are not supported. So again I have modified the code. Couple of the features are inspired by Mioplanet’s news ticker. Here are the main features:

• option for ExtJS Store object
• visually enhance with color labels
• ticker pauses when mouse hovers over
• support categorised message type such as: Warning, Info
• click event handler support for messages

ExtJS: note on using autoLoad

Part of my web application is to construct a html document with embedded graph images. Once the document is created, a Panel component uses autoLoad property to load & display the content. However, the rendering inside the component is different to a browser displaying the html document. The ordered list tag < ol > is missing.

Creating a login page with ExtJS

I need to polish up the login screen of my ExtJS application and come across the
WordPress style login designs which gives me some ideas. Here is my first design of the login page using ExtJS.

ExtJS Spinnerfield icon obscured

It took me a while to find out why the up /down arrow icon in the Ext.ux.SpinnerField is obscured. It looks like this

Create Context Menu on Highcharts graph with ExtJS 3

Since I released the changes for the Highcharts context menu mod, I received a few requests for a proper working example. So I have included an ExtJS 3 example file in my github Highcharts_ContextMenu. Check it out.

Integrating Highcharts Gauge/Dial chart into ExtJS

Although Highcharts currently doesn’t support Gauge/Dial chart, it is planned in the future release. However, I found there is a quick mocked up code in the feature request post with an online demo. So I have modified the code with the following features:

• display the gauge chart within a ExtJS 3 panel.
• autoscale within the panel
• add subtitle next to the gauge
• animation when value change

ExtJS HtmlEditor’s broken ordered and unordered list when hitting RETURN

In the ExtJS 3, the HtmlEditor doesn’t insert the next list item when hitting the RETURN key at the end of a list. This bug has been reported in the forum and there are other fixes. Here is my alternate fix.