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.

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();
  }
}

Changes to make CutyCapt bypassing ssl certificate confirmation

I need to use CutyCapt to run with https url on server side. However, it doesn’t support https url. A patch for bypassing the SSL certificate confirmation has been submitted on this page (and other additional features). However that change has never been pulled to the main release. So I tried to apply the patch to the source, the patch process didn’t work and the build failed.

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.

Highstock extension for ExtJs 4

Here is a Highstock extension for ExtJs 4. The extension is derived from the original work of Highcharts ExtJs adapter with significant modifications. Although Highstock shares the same APIs and similar configs as the Highcharts, I tried my best to change as little as possible in terms of usage. With the correct setup, this extension can do all the different plots as the original Highstock demos in ExtJs 4 framework.

This is a rather long article. The first part is to demonstrate how to create a Highstock config in ExtJs 4. The second part is to describe how to use the extension to achieve more advanced plots shown in the Highstock demos. Hopefully, you won’t find it too difficult to follow.

Mental picture of ExtJs 4 MVC Architecture

Highstock is working on ExtJs 4!! (Experimental)

Wahey!! I got Highstock working on ExtJs 4 after a full day hacking on my HighChart ExtJs 4 extension. Although HighStock shares common APIs to HighChart, the extension requires quite a few changes. Well, hopefully I can release the package probably sometime next week, need to create a lot of examples to make sure everything is working.