Skip to content

Recent Articles

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 »

23
Sep

List of Qt Icons

I was given a job to smarten up a GUI program which is implemented in PyQt. One of the tasks is to put up some icons in the user interface. I know that Qt includes it’s own set of icons. However, I can’t find any page online showing what these icons look like. So I wrote a little program to list all the available Qt icons. Here is the screenshot:

List of Qt icons
Read more »