Skip to content

Posts from the ‘Javascript’ Category

2
Aug

Passing data from SiriKit Intent Extension to Cordova

I have a mobile app built with Cordova and Sencha Modern Framework and I have also integrated the app with SiriKit workout domain. So if I speak to my iPhone,

Hey Siri, run a test with MYAPP.

Siri will launch my mobile app and run the test service. In order to do that, I need to be able to pass additional data from my Siri workout Intent handler. So that my Cordova app knows which service to start. For details how to create a SiriKit Intent extension, see this.

Read more »

Advertisements
16
May

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.

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 »

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 »

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 »

8
Sep

Javascript: How to really check for an object property exists

In Javascript, undefined is a value and it can be assigned to properties. So strictly speaking, we shouldn’t use undefined to check for whether an object’s property is defined.

var foo = new Object();
foo.fieldUndefined = undefined;

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.