ExtXL is an extention of ExtJS.If you are new to ExtJS or you want more infomation about ExtJS,please
visit the ExtJS web site.
There is a same pattern to create an Ext Component(Widget),below is a code snippet creating a Ext.Panel:
new Ext.Panel({
title:"MyPanel",
collapsible:true,
items:[{
new Ext.Button({text:"Submit"});
}],
renderTo:"panelDiv"
})
The code creates a panel with title "MyPanel",passing 3 config items:boolean item 'collapsible' telling whether this panel is collapsible and array 'items' indicating what child components the panel has,and the panel will be embeded in an html element with id 'panelDiv'.
In ExtXL,these items will be configured in xml formats which is more readable,structural and expressive.See the following:
<div ext:xtype="panel" ext:title="MyPanel" ext:collapsible="true">
<xml xmlns="http://extxl.sourceforge.net">
<items>
<button text="Submit"></button>
</items>
</xml>
</div>
The pattern of ExtXL configuration is
a root DOM node with an XML child,who has more child widgets.