Design Goals

I have decided to re-design my webpage because I used some nested floating divs and I started to lose track of the hierarchy and css rules assigned to them. The design goals were:

• Fixed width content area always displayed centered in the browser window
• Fixed width columns: left for navigation, center for content and right for AdSense
• Standard 5 regions: north, west, center, east and south (not used yet)
• Use Ext as much as possible
• Keep css stylesheets as simple and straightforward as possible
• Content generated by Ext
• Cross-browser

The Main Container

Let’s create it as first parent of body:

and css:

#ct {
  width: 1020px;
  margin: auto;
}

So far so good, this works fine in all major browser but not, as usually, in Internet Explorer. Therefore, we need one more css rule that can create some minor problems we will have to solve later such as combo box dropdown list will be center aligned. Anyway, I haven’t found any better way for IE.

/* not needed if you use a strict doctype */
body {
  text-align: center;
}

Update: I have meanwhile found that IE supports auto margins the expected way in strict mode. On the other hand, Jack Slocum advocates against using a doctype as it can trigger IE bugs resulting in rendering problems.

Now, it is up to you if you align body text to center and then you need to fix many Ext classes that inherits this rule from body or you use a strict doctype and you will risk the IE mis-behavior.

I have chosen to use the xhtml 1.0 strict doctype. Do not use the above text-align:center body rule if you use a strict doctype.

Ext Layout

I needed north, west, center, east and south so first idea was to use BorderLayout rendered to ct and with autoHeight:true. After some trials and errors I found out that BorderLayout is not usable for this purpose so I’ve switched to TableLayout.

Now, the outermost container is Ext.Panel with TableLayout configured like this:

var layoutPanel = new Ext.Panel({
     id:'main-layout'
    ,layout:'table'
    ,layoutConfig:{columns: 3}
    ,defaults:{border: false}
    ,items:[{
         id:'north'
        ,colspan:3
        ,cellCls:'td-north'
        ,border:false
        ,contentEl:'north-content'
    },{
         id:'west'
        ,cellCls:'td-west'
        ,border:false
        ,contentEl:'west-content'
    },{
         id:'center'
        ,cellCls:'td-center'
        ,border:false
    },{
         id:'east'
        ,cellCls:'td-east'
        ,border:false
        ,contentEl:'adsense'
    },{
         id:'south'
        ,colspan:3
        ,cellCls:'td-south'
        ,border:false
    }]
});

Content Elements

Some page content is statical, written in HTML markup so I have used contentEl:’div-id’ to put it to right place (cell) of the layout. I already have divs with ids: north-content, west-content and adsense.

Some stylesheets are needed too at this point, keeping in mind that cellCls is assigned to the table cells (tds) and that table does not fill 100% of the container by default. This css hadles it:

/* not needed if you use a strict doctype */
body {
  text-align: center;
}
#ct {
  margin: auto;
  width: 1020px;
  /* not needed if you use a strict doctype */
  text-align: left;
}
#main-layout table {
  width: 100%;
}
.td-north {
  height: 90px;
}
.td-west {
  width: 190px;
  vertical-align: top;
}
.td-center {
  width: 700px;
  vertical-align: top;
}
.td-east {
  padding: 0 0 0 10px;
  vertical-align: top;
}
.td-south {
  height: 30px;
}

Conclusion

Finally, it is easy. I have all design goals in and if I need to render anything to, let’s say center, I just grab a reference to the panel’s body and render to it. For example:

Ext.get('center').body.update('Center Content');

or whatever else. If I need to put a static content in it I write it to a container and I’ll use contentEl as I did for north and east.

And the result is: https://learnfromsaki.com. I like it!

• Author
• Recent Posts

Follow me:

saki

I'm a well seasoned developer, consultant and educator of web applications based mainly on Sencha libraries, PHP, MySQL and Node.js. Besides (Apple) computers, I love photography and mountain biking.

Follow me:

Latest posts by saki (see all)

• Ext, Angular, React, and Vue - 27. June 2019
• The Site Resurgence - 11. February 2018
• Configuring ViewModel Hierarchy - 19. June 2015