Ext JS Theme Revealed
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
This entry was posted on Tuesday, October 9th, 2007 at 5:58 am and is filed under ExtJS, Help, Wordpress. You can follow any responses to this entry through the RSS 2.0 feed. Responses are currently closed, but you can trackback from your own site.
Tags: , ,
Posted in ExtJS, Help, Wordpress | 7 Comments »
7 Responses to “Ext JS Theme Revealed”
Nico says:
February 9, 2008 at 9:22 pm |

Testing theme =)

Great app

testando says:
April 2, 2008 at 1:54 am |

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

Khashayar says:
May 11, 2008 at 3:20 pm |

well done

Me says:
July 25, 2008 at 7:21 pm |

good!

bywide says:
October 28, 2008 at 12:31 pm |

nice … O_O

Trojan, says:
January 28, 2009 at 11:27 am |

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