Ext.BoxComponent也是一个比较重要的基础类，它直接继承自Ext.Component，并实现了定位和控制自身大小的功能。

可以使用pageX、pageY、x、y为Ext.BoxComponent指定具体的坐标，也使用width和height为Ext.BoxComponent指定长度和宽度，或者使用autoHeight和autoWidth让Ext.BoxComponent根据本身的内容自动调整长度和高度。

<HTML> 
<HEAD> 
<TITLE>布局</TITLE> 
<link rel="stylesheet" type="text/css" href="Ext/resources/css/ext-all.css" /> 
<script type="text/javascript" src="Ext/ext-base.js"></script> 
<script type="text/javascript" src="Ext/ext-all.js"></script> 
<script type="text/javascript" src="Ext/ext-lang-zh_CN.js" charset="utf-8"></script> 
</HEAD> 
<script type="text/javascript"> 
    Ext.onReady(function() {  
        var box = new Ext.BoxComponent( {   //设置BoxComponent属性的配置  
            region: 'b1',  
            el: 'b1',  
            style: 'background-image: url(Ext/2013-08-26_113613.png); position: absolute;',  
            pageX: 0,
            //pageX: 630,
            pageY: 0,
            //pageY: 260,
            width: 228,  
            height: 182  
        });  
        box.render();  
     });  
</script> 
<BODY> 
    <div id="b1"></div>
</BODY> 
</HTML>