Programmer's Blog

Programmer's reference

Category Archives: Ext js

Ext js: Background image as Ext.container.Container

The following code is to create a background for Ext js object.

Just render the container in Main.js as an object

Ext.define('YourPJName.BgContainer', {
    extend: 'Ext.container.Container',
    id: 'backgound-container',
    style: 'background-color: #c3c8ce;',
    html: '<img src="bg.jpg" height=1980 style="position:absolute; TOP:0px; LEFT:0px;" />'

Ext js: Set styles using inline variables

The following code is rendering style using external variables,

The following example is complement with the example in Ext js: zoom ratio for all platforms words in red are inline variables in javascript program.

var form = Ext.create('Login.LoginPanel',{
            style: ('margin: auto; zoom:' + zoomRatio  + 
          '% !important; top: ' + topMargin + 'px !important;'  ),
            renderTo    : Ext.getBody()

Ext js: Zoom Ratios for objects on all platforms

Since the screen size of platforms vary nowadays, we need to cater different resolutions on every device.

The following codes auto detect the size of browser and screen size for rendering other panels/containers.

    var browserWidth = window.outerWidth;
    var browserHeight = window.outerHeight;
    var screenWidth = screen.width;
    var screenHeight = screen.height;
    var Height2WidthRatio = screenHeight / screenWidth;
    var bHeight2WidthRatio = browserHeight / browserWidth;

    //zoomratio for Mac and other mobiles
    var zoomRatio = 120*screenWidth / 480;
    var macZoomRatio = 130*screenHeight / 480*Height2WidthRatio;

    //margin for Mac
    var macTopMargin =  180*bHeight2WidthRatio ;
    var macLeftMargin =  screenWidth / 6.5*bHeight2WidthRatio ;

    //margin for other phone
    var topMargin =  150*bHeight2WidthRatio;
    var leftMargin =  (screenWidth / 6.5*bHeight2WidthRatio) ;

if ( Ext.isWindows ) {
    <Render objects here if platform is Windows>
} else if ( Ext.isMac ) {
    <Render objects here if platform is Mac / iPhone / iPad>
} else {
    <Render objects here for other platforms e.g. Android>