F2 and Ext JS

HTML

<html>
    
    <head>
        <link rel="stylesheet" type="text/css" href="http://docs.openf2.org/css/bootstrap.min.2.1.1.css">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <script src="http://docs.openf2.org/js/f2.min.js"></script>
    </head>
    
    <body>
        
    </body>

</html>

CSS

body { padding:20px; }

JavaScript

/**
 * F2 app integration using Ext JS. 
 * More at http://docs.openf2.org/container-development.html
 */

//define app config
var _appConfigs = [{
    appId: "com_openf2_examples_csharp_helloworld",
    manifestUrl: "https://developer.openf2.org/Examples/apps",
    name: "Hello World"
}];

var ExtView = function(appConfig, appHtml){
    Ext.application({
        name: 'HelloExt',
        launch: function() {
            Ext.create('Ext.container.Viewport', {
                layout: 'fit',
                items: [
                    {
                        html : appHtml
                    }
                ]
            });
        }
    });  
};

Ext.onReady(function () {
    //init F2 container
    F2.init({
        //define ContainerConfig properties
        appRender: function (appConfig, html) {
        	ExtView(appConfig, html);
        },
        beforeAppRender: function (appConfig, html) {
            
        },
        afterAppRender: function (appConfig) {
            
        }
    });
    
    //load apps
    F2.registerApps(_appConfigs);
});