Skip to content

Recent Articles

2
Dec

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
</Directory>

Read more »

12
Feb

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 »

11
Feb

PyQt: How to hide top level nodes in tree view

In Qt treeview, hidding top level nodes is different to hidding lower level nodes. Lets start with a simple treeview example with two non-empty branches. Here is the code:
Read more »

9
Jan

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:

screen
Read more »

9
Jan

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:

MyApp.download = function(url) {

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

    Ext.DomHelper.append(document.body, {
        tag: 'iframe',
        id:'downloadIframe',
        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));
      readfile($filepath);
23
Dec

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:

Ext.application({
    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'
        }).show();
    }
});

Read more »

9
Dec

How to Embed Twitter Widget into ExtJs Panel

In order to embed Twitter page into ExtJs Panel, we need to first create a Twitter Widget. Go to Twitter account page, select Settings/Widgets.

screen1

Read more »

30
Oct

Awk script for changing Ubuntu network interfaces – added DNS feature

At last, I have added the DNS feature for the network interfaces awk script. This feature is only used with static network settings.

Assume we have the following settings in the interfaces file:
Read more »

2
Oct

Styling Qt QTreeView with CSS

Qt offers additional CSS settings such as sub-control and pseudo-states. Although there are reference and brief tutorial with examples, it doesn’t really show how this settings affect the overall look. In this article, we explore how to style the QTreeView via CSS in step by step. First of all, we use a simple treeview directory program (Python/Qt5 ) from this example and style it gradually.
Read more »

27
Sep

How to create HighStocks area range chart for ExtJs

Here is an example of using the Highstocks extension for ExtJs 4 to create an area range stock chart.

First, there is a minor bug in the Highstocks extension that the property name for specifying the series type is ‘series.plot‘, not ‘series.type‘. Read more »