Skip to content

Posts from the ‘Web’ Category


Update Cordova Project after Upgrading to Android Studio 3

After I upgraded my Android Studio to version 3 which also updates the Gradle build system to version 4, my Sencha mobile app (with Cordova) suddenly stops building with the following errors:

Read more »


ExtJs: Simple way to setup ‘All’ checkbox to reflect other checkboxes status across the row in a Grid Panel

Suppose you have a number of checkboxes (checkcolumn) for each row in a GridPanel and an ‘All’ checkbox to control & reflect the status of other checkboxes in the row, i.e.

  • Uncheck any box will also uncheck the ‘All’ checkbox
  • When all the checkboxes are checked, the ‘All’ checkbox is automatically checked

Read more »


CSS Smiley Infinite Animation – Added Furious Face

In Coffee Steam, it shows a cool CSS animated effect of steam from a coffee. I have copied the CSS code and integrated with my recent modified work on smiley face. A new emotion after the angry face, furious, which is basically angry face and steam together. Here is the demo.


Adding Infinite Loop to the Cool CSS Smiley Animation

There is a very cool pure CSS smiley animation created by Tiago Alexandre Lopes. The animation begins as soon as one of the smiley radio buttons is checked. However, the nice animation doesn’t repeat. It would be nice to have the animation repeated every 5 seconds.

TL;DR Here is the demo.

Read more »


Sencha ExtJs Modern: How to Switch Off Compression in ‘Build & Emulate’

Although in Sencha Cmd, we can easily switch off compression by doing a Testing build. In ExtJs Modern framework, when we do a ‘Build & Emulate’, it compresses all the JS code anyway and there is no option to switch it off (Well, at least in Sencha Architect). This makes it hard to debug mobile applications when runs it on an Android emulator, especially using Chrome developer console to remote attach to the emulator.

I contacted the support, here is how you switch the compression off by adding highlighted lines to app.json as shown belown:

     "native": {
         "packager": "cordova",
         "compressor": null,
         "properties": {
            "build.compression": "",
            "enable.resource.compression": false
         "cordova": {
            "config": {
               "id": "com.domain.MyApp",
               "name": "MyApp",
               "platforms": "android"

After that, do a ‘Build & Emulate’ again. When you reconnect the Chrome developer console, you should see your own source code as well as ExtJs source.


Getting ExtJs to work with CORS and Cookies (on Chrome)

This is just a quick reminder note for myself on how to get ExtJs working with cross domain Ajax query and Cookie. My server side code is implemented with Php Slim micro framework which I use .htaccess file on the document root directory.

Step 1. Configure Apache

In my document root setting, I enable some settings can be override by .htaccess file.

<Directory /var/www>
    Options Indexes FollowSymLinks MultiViews
    # enable the .htaccess rewrites
    AllowOverride All
    Require all granted

Read more »


Sencha Architect: How to use ViewModel to Bind Store into Grid Panel

In ExtJs (5+), one of the major features is MVVM (Model-View-ViewModel). It is an alternative approach of MVC. Basically, MVVM enables each view component have it’s own ViewController and ViewModel classes. This offers a number of benefits, better code management, smaller memory footprint, and better integration with automated tests. In this article, we explore how to use Sencha Architect to setup ViewModel relationship.
Read more »


ExtJs5: Notes on Collapsing Panel in BorderLayout

Suppose we have a panel with borderlayout. The center region is a tab panel with two tabs: Expand and Collapse, whereas the south region is a collapsible panel. The whole idea is to program by clicking ‘Expand’ and ‘Collapse’ tabs which will automatically expand and collapse the south panel respectively. The following is the screenshot:

Read more »


ExtJs: button handler for downloading files

I need to create a ExtJs button for downloading files from time to time. Here is the code I normally use. I put it here for my own reference: = function(url) {

    // Keep using the same iframe
    var iframe = Ext.get('downloadIframe');
    iframe && Ext.destroy(iframe);

    Ext.DomHelper.append(document.body, {
        tag: 'iframe',
        frameBorder: 0,
        width: 0,
        height: 0,
        css: 'display:none;visibility:hidden;height: 0px;',
        src: url

Standard Php code for downloading a file:

      $filepath = "/path/to/file";
      header("Content-Disposition: attachment; filename=\"" . basename($filepath) . "\"");    
      header("Content-Type: application/force-download");
      header("Content-Description: File Transfer");             
      header("Content-Length: " . filesize($filepath));

Creating a simple fancy HTML list inside a ExtJs Panel

In this blog, we explore how we can quickly assemble a HTML list within a ExtJs Panel. First we use Sencha Cmd to create a simple app  (See this for tutorial). Below is our first approach to launch the app:

    name: 'Demo',

    extend: 'Demo.Application',

    // autoCreateViewport: 'Demo.view.main.Main'

    launch: function() {
        var win = Ext.create('Ext.window.Window', {
            title: 'Demo',
            width: 500,
            height: 350,            
            html: '<div id="welcome">Welcome to the iTrinegy Demo</div><div id="home_logo"></div><div id="status_list"></div>',
            bodyPadding: '20 15 15 15'

Read more »