Now that we've created our custom components, we can add them to any other container object within Ext JS. We can now use our xtype to refer to the component type, for lazy instantiation, and we can get all of the benefits of modular design. Let's apply our two new components with a border layout, for side-by-side viewing.
Example 4:ch14ex4.js
var ContactDetail = new Ext.Panel({
title: 'Contact Details',
applyTo: 'chap13_ex04',
width: 400,
height: 125,
layout: 'border',
frame: true,
items:[{
region: 'west',
xtype: 'userdetail',
width: 200,
data: userData[0]
},{
region: 'center',
xtype: 'addrdetail',
width: 200,
data: userData[0]
}]
});
We have identified the West and center regions of our BorderLayout as belonging to the UserDetail and AddressDetail class types respectively. If this layout were part of a window object, these two classes wouldn't even be...