Ext.BoxComponent学习

原创

ccna_zhang 2022-09-05 16:59:19 博主文章分类：Ext Js ©著作权

文章标签 reference html function class div 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者ccna_zhang的原创作品，请联系作者获取转载授权，否则将追究法律责任

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();
   });