October 9th, 2007 by W.Regenczuk

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:

1
2
3
4
5
6
7
8
9
10
11
12
13
<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:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<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:

1
2
3
4
.x-layout-panel-north, .x-layout-panel-south {
  background-color:#DEECFD;
  border:1px solid #DEECFD; 
}
ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme ajax javascript framework grid tree javascript library component extjs ext js wordpress blog theme
Pages: 1 2 3 4 5 6 7 8 9
7 Responses to “Ext JS Theme Revealed”
Nico says:

Testing theme =)

Great app

testando says:

testando, m testando, m testando, m testando, m

Khashayar says:

well done

Me says:

good!

bywide says:

nice … O_O

Trojan, says:

hello! i like this themes, but i can’t install.why ? pls help me!