Extjs 4 extending application for mdi

Question

Is there any way to extend an application into another application for mdi ? For ex. I have 3 applications : "Transaction" ,"SalesOrder" & "PurchaseOrder" i want to reuse "Transaction" by extending it in "SalesOrder" & "PurchaseOrder" . Whats the clean way to do it?

Answer 1

Simply you can define an application with specific name and then extend from that.

BaseApp.js:

Ext.application({
    name: 'BaseApp',
    launch: function () {
        alert("Base App Launch");
    }
});

ChildApp.js:

Ext.application({
    //extend from base app
    extend: 'BaseApp',
    name: 'ChildApp',
    launch: function () {
        alert("Child App Launch");
    }
});

Answer 2

Yes it's possible since ExtJS 4.2.

Check documentation section 'Deriving from Ext.app.Application' at http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.app.Application

Here is a small example:

Ext.define('Transaction.Application', {
    extend: 'Ext.app.Application',
    requires: [],

    // application namespace
    name: 'Transaction',

    // name of the app instance in DOM (e.g. Transaction.instance)
    //appProperty: 'instance',

    // application folder
    appFolder: '/js/Transaction',

    autoCreateViewport: true,

    controllers: [
    ],

    views: [
    ],

    launch: function() {
        console.log('application started');
    }
});

Ext.define('SalesOrder.Application', {
    extend: 'Transaction.Application',
    requires: [],

    // application namespace
    name: 'SalesOrder',

    // application folder
    appFolder: '/js/SalesOrder',

    autoCreateViewport: false,

    controllers: [
    ],

    views: [
    ],

    launch: function() {
        Ext.create('Ext.container.Viewport');
        this.callParent();
    }
});

Ext.define('PurchaseOrder.Application', {
    extend: 'Transaction.Application',
    requires: [],

    // application namespace
    name: 'PurchaseOrder',

    // application folder
    appFolder: '/js/PurchaseOrder',

    autoCreateViewport: false,

    controllers: [
    ],

    views: [
    ],

    launch: function() {
        Ext.create('Ext.container.Viewport');
        this.callParent();
    }
});

Ext.application('PurchaseOrder.Application');

// Then you can acces your application instance anywhere:
var app = PurchaseOrder.getApplication();