Ext.BoxComponent学习

1：基本的知识

    Base class for any Component that is to be sized as a box, using width and height.

    BoxComponent provides automatic box model adjustments for sizing and positioning and will work correctly within the Component rendering model.

    A BoxComponent may be created as a custom Component which encapsulates any HTML element, either a pre-existing element, or one that is created to your specifications at render time. Usually, to participate in layouts, a Component will need to be a BoxComponent in order to have its width and height managed.

   To use a pre-existing element as a BoxComponent, configure it so that you preset the el property to the element to reference:

   

var pageHeader = new Ext.BoxComponent({
    el: 'my-header-div'
});

  This may then be added to a Container as a child item.

 To create a BoxComponent based around a HTML element to be created at render time, use the autoEl config option which takes the form of a DomHelper specification:

var myImage = new Ext.BoxComponent({
    autoEl: {
        tag: 'img',
        src: '/images/my-image.jpg'
    }
});

2：用法

   它继承子Ext.Component类，并实现了定位和控制自身大小的功能，可以使用pageX，pageY，x，y为Ext.BoxComponent指定具体的坐标从而固定元素的位置，也可以使用width和height指定长度和宽度，或者使用autoHeight和autoWidth让Ext.BoxComponent根据自身的内容调整长度和高度

  举例说明：

  Ext.onReady(function() {
  	var box = new Ext.BoxComponent( {   //设置BoxComponent属性的配置
  		region: 'b1',
  		el: 'b1',
  		style: 'background-image: url(images/a.jpg); position: absolute;',
  		pageX: 630,
  		pageY: 260,
  		width: 228,
  		height: 182
  	});
  	box.render();
   });

然后在页面的body标签中定义一个层：

<div id="b1"></div>