xtype defined

Saki — Fri, 09 May 2008 00:51:06 +0000

Preface

There has been a lot of confusion I have observed on the Ext Forums as to xtype. Some people ignore it fully, some think that it is what it is not. So I’ve decided to clarify it.

Definition

xtype is a symbolic name given to a class. Nothing less, nothing more.

For example, your class has the name Ext.ux.MyGrid. This is the normal class name that you use when you need to instantiate this class (create an object of the class).

In addition to class name you can give your class xtype this way:

Ext.reg('mygrid', Ext.ux.MyGrid);

xtype here is mygrid and normal class name is Ext.ux.MyGrid. The above statement registers a new xtype or, in other words, connects xtype mygrid with class Ext.ux.MyGrid.

What is it good for?

Imagine you have a big application where objects (windows, forms, grids) are created when they are needed as responses to user actions. For example, the user clicks an icon or button and a new window with a grid inside is created, rendered and displayed on the screen.

Now, if you code such application in an before-Ext-2.x way you need to instantiate all objects in the application at the time of first page loading (application code first run). You will have an object of class Ext.ux.MyGrid somewhere in the browser’s memory waiting for rendering on a user click.

This is just for one grid – you may have hundreds of them… What a waste of resources! The grid is sitting somewhere there but the user may never click that button, may never need that grid.

Lazy Instantiation

If you have xtype, the only thing that sits in the memory is a simple configuration object such as:

{xtype:'mygrid", border:false, width:600, height:400, ...}

That is not as expensive as a complex instantiated class.

Now, what happens if the user clicks our button? Ext will see that the to-be-rendered-grid is not even instantiated but it knows how to deal with it. ComponentMgr knows: “If I need to instantiate an object of xtype mygrid I need to create an object of class Ext.ux.MyGrid” so it runs this code:

create : function(config, defaultType){
    return new types[config.xtype || defaultType](config);
}

In other “words”:

return new Ext.ux.MyGrid(config);

That instantiates our grid; rendering and displaying will follow. Remember: Instantiated only if needed.

Designing a 3 columns web page using TableLayout

Saki — Fri, 04 Apr 2008 22:26:48 +0000

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:

<body>
  <div id="ct"></div>
</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: http://extjs.eu . I like it!

Saki's Blog » design