extjs html layout

I already know that ExtJs is a framework to build RIA and it doesn't fit well into a defined page layout. My applications is one page only where the main content is dynamic (from Ajax call)

<html>
    <head> some stuff</head>
    <body>
    <div class = “header”> some stuff </div>
    <div class=”wrap”>
     <div class=”mainContent” id=”main”></div>
     <div class=”sidebar” id=”side”></div>
    </body>
    </html>

what I need to do is build contents on main and side. mainContent can have different inner layout depending on the stuff I need to display

i.e. (I need to display an home page, a category page and article page)

// mainContent for home page:

<div class=”mainContent” id=”main”>
 <div class=”mainBox” id=”mB”> some stuff and some other divs</div>
 <div class=”leftBox” id=”lB”> some stuff and some other divs</div>
<div class=”rightBox” id=”rB”> some stuff and some other divs</div>
</div>

// mainContent for category page:

<div class=”mainContent” id=”main”>
 <div class=”categoryHeader” id=”ch”>
  some stuff
  <div class=”categoryContent” id=”cc”>
  some stuff
</div>
</div>
 <div class=”subCategoryHeader” id=”sch”> 
  some stuff
<div class=”subCategoryContent” id=”cc”>
  some stuff
</div>
</div>
<div class=”articles” id=”art”> 
 <div class=”artHeader” id=”aah”>some stuff</div>
<div class=”artContent” id=”aac”>some stuff</div>
</div>
</div>

// mainContent for article  page:

<div class=”mainContent” id=”main”>
 <div class=”articleHeader” id=”aH”> some stuff</div>
 <div class=”articleHeader” id=”aC”> some stuff</div>
<div class=”articleComments” id=”aCC”> some stuff</div>
</div>

My approach:

I’m using an Ext.Container with card layout with three items, one for each page: i.e.:

mainContent = new Ext.Container({
// some cfg options
items: [{xtype: ‘homepage’},{xtype:’categories’},{xtype:’articles’}]    
})

where

MyApp.homePage = Ext.extend(Ext.Container, {
  onRender: function(ct) {
    this.el = ct.createChild({
      children: [
        {cls: 'mainBox', id:’mB’},
        {cls: 'leftBox', id:’lB’},
        {cls: 'rightBox', id:’rB’},
      ]
    });
    MyApp.homePage.superclass.onRender.apply(this, arguments);
  }
});
Ext.reg('‘homepage’', MyApp.homePage);

// same idea for the other xtypes

Question is:

What is the best way to build subpage components (mainbox, leftbox, rightbox, etc..) keeping into account that for each component I need an Ajax call (i.e. leftBox can be the last 5 articles).

Thanks

P.S. I don't want to use jQuery or similar stuff.

ansaurus

tags:

views:

answers:

extjs html layout

related questions