Skip to content

Posts from the ‘ExtJs 5’ Category

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 »

Advertisements
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 »

21
Aug

Highcharts extension for Sencha v3.2.1 is here

Highcharts extension v3.2.1 is out. This release includes important performance fix (due to my crap code) and corrupt xAxis display with connectNulls option.

28
Feb

Building ExtJs/Highcharts Application with Sencha Cmd 5 Tool

A number of users have asked me how to build ExtJs application with my Highcharts extension using Sencha Cmd tool. I have been ignoring this question with the excuse of way too busy. Now, my new book is done and I am going to address this here. The aim of this article is to demonstrate that the extension does work with sencha command tool.

Lets start off by generating an ExtJs 5 application with the following sencha command:

sencha -sdk extjs5 generate app HighchartsSenchaDemo hcExtJsDemo

Read more »

22
Sep

Highcharts extension for Sencha ExtJs now includes Highmaps support

screen
The new release now includes Highmaps support. A new online demo is setup and the demo code is included in the new release under the directory, highmaps_demo.extjs4. Read more »

14
Sep

Highcharts extension for ExtJs 4/5 is here now

screen Highcharts Extension 3.1.0 now supports ExtJs 5. It includes couple updates:

– All demos now refer to ExtJs CDN rather than from my demo site

– Added support for Solid Gauge series

Apart from removing deprecated methods in ExtJs, all the existing code should work directly with this extension & ExtJs 5. There are known issues using with sencha command which I still need more user feedbacks and time to resolve this. Hopefully, I will find some time to finalise my Highmaps extension for ExtJs.