BorderLayout adjustments

Many of ExtJS forum users agrees that Ext 2.0 look&feel is a bit better that Ext 1.1. I have chosen 1.1.1 version to create the theme, but I wanted to have some “desing” ideas from Ext 2.0 in it. I took as and example Feed Reader 3.0 and here is what I did. First take a look at the index.php that contains layout objects:

<div id="panelNorth" class="x-layout-inactive-content">
    <div id="header"><?php bloginfo(‘name’); ?></div>
</div>
<div id="panelCenter" class="x-layout-inactive-content">
    <div id="wp-toolbar" class="x-layout-inactive-content"></div>
    <div id="wp-posts" class="x-layout-inactive-content"></div>
</div>
<div id="panelEast" class="x-layout-inactive-content">
    <?php get_sidebar(); ?>
</div>
<div id="panelSouth" class="x-layout-inactive-content">
    <p>Powered by Wordpress.</p>
</div>

And here is the layout definition:

<script>
. . .
setupLayout: function() {
    layout = new Ext.BorderLayout(document.body, {
        hideOnLayout: true,
        north: {
            titlebar: false,
            split:false,
            height:49
        },
        center: {
            margins: {top:0,bottom:0,right:0,left:5},
            tabPosition: ‘top’,
            titlebar:true,
            closeOnTab: true,
            resizeTabs: true
        },
        east: {
            margins: {top:0,bottom:0,right:5,left:0},
            cmargins: {top:0,bottom:0,right:5,left:5},
            split:true,
            showPin: true,
            titlebar:true,
            collapsible:true,
            initialSize: 220,
            minSize: 220,
            maxSize: 600
        },
        south: {
            titlebar: false,
            split:false,
            height:20
        }
 
    });
    innerLayout = new Ext.BorderLayout(‘panelCenter’, {
        north: {
            split:false,
            initialSize: 27,
            collapsible:false,
            titlebar: false
        },
        center: {
            closeOnTab: true,
            titlebar:false
        }
    });
    layout.beginUpdate();
    theNorth = layout.add(‘north’, new Ext.ContentPanel(‘panelNorth’, {
        autoScroll:false
    }));
    theSouth = layout.add(’south’, new Ext.ContentPanel(‘panelSouth’, {
        autoScroll:false
    }));
    theCenter = layout.add(‘center’, new Ext.NestedLayoutPanel(innerLayout, {
        title: Wp.bloginfo.description
    }));
    innerLayout.beginUpdate();
        theToolbar = innerLayout.add(‘north’, new Ext.ContentPanel(‘wp-toolbar’, {
            fitToFrame: true,
            autoScroll:false
        }));
        thePosts = innerLayout.add(‘center’, new Ext.ContentPanel(‘wp-posts’, {
            title: Wp.bloginfo.title,
            autoScroll:true,
            fitToFrame: true
        }));
    innerLayout.restoreState();
    innerLayout.endUpdate(true);
    theEast = layout.add(‘east’, new Ext.ux.Accordion(‘panelEast’, {
        monitorWindowResize:true,
        title:‘Sidebar’,
        autoScroll:true,
        collapsible: true,
        fitToFrame: true,
        animate:false,
        boxWrap: true,
        fitContainer: true,
        keepState: true,
        expanding:true,
        fitHeight:true
    }));
 
    layout.restoreState();
    layout.endUpdate();
}
. . .
</script>

innerLayout is not important here, it just has north region for a toolbar and center region for the content. But take a look at the layout: center and east regions have margins and cmargins (collapsed margins) property set. It makes center and east regions look like they are above the fabric. A nice thing of Ext.BorderLauout IMHO. To make it look sharp there is a need of altering x-layout CSS directives. In sort x-layout-panel-north and x-layout-panel-south classes have to have border and background in color of the “fabric”. Altering CSS for aero theme looks like this:

.x-layout-panel-north, .x-layout-panel-south {
  background-color:#DEECFD;
  border:1px solid #DEECFD;
}