Ext.Component

Ext.Component

对标签(尤指div)的封装

所有Ext组件的基类,组件下所有的子类都可能参与自动化Ext组件的生命周期执行创建, 渲染和销毁都是由Container容器类提供,组件可以通过容器配置items创建, 也可以通过动态方法 add创建

组件基类内置了组件的 隐藏/显示,启用/禁用,大小控制行为.

所有组件被注册在布局管理器中Ext.ComponentManager, 这样就可以通过Ext.getCmp随时被引用,

所有用户自定义的可视部件,他们的生命周期和规模 管理的子类组件都必须参加.

组件(component)通常不被实例化，因为有子类实现专门的组件. 很多时候覆盖了大部分的应用需求。 但是，它是可以实例化的基础组件，它会被渲染，或将参与一个容器的子项的布局

在页面中只创建Ext.Component

    Ext.create("Ext.Component", {
        renderTo: Ext.getBody()
    })

得到html标签

<div class="x-component  x-component-default x-border-box" id="box-1009"></div>

 

autoEl:值默认为 'div',可以改变整体标签的强大属性

       autoEl: {
            tag: 'img',
            src: 'http://www.example.com/example.jpg'
        }

<img class="x-component  x-component-default x-border-box" src="http://www.example.com/example.jpg" id="box-1009">

 

autoScroll:true-->overflow样式

<div class="x-component  x-component-default x-border-box" id="box-1009" style="overflow: auto;"></div>

 

baseCls:button-->基础css,配合bootstrap修改样式-->默认`x-component`

<div class="button  button-default x-border-box" id="box-1009"></div>

 

border:'10 5 3 10'-->好烦,只有width

<div class="x-component  x-component-default x-border-box" style="border-width:10px 5px 3px 10px;" id="box-1009"></div>

 

childEls:定义子元素的快捷入口,相当方便

Ext.create('Ext.Component', {
    renderTo: Ext.getBody(),
    renderTpl: [
        '<h1 id="{id}-title" data-ref="title">{title}</h1>',
         '<h1 id="{id}-test" data-ref="test">{testHtml}</h1>',
        '<p>{msg}</p>',
    ],
    renderData: {
        title: "Error",
        msg: "Something went wrong",
        testHtml:'testHtml.......'
    },
    childEls: ["title", { name: 'buttonText', itemId: 'test' },],
    listeners: {
        afterrender: function(cmp){
            console.log(cmp.title);
            console.log(cmp.buttonText);
            cmp.title.setStyle({color: "red"});
        }
    }
});

相对于extjs4.0,data-ref必须存在,作用暂时无视

 

cls :'text' -->$().addCss

<div class="x-component  text x-component-default x-border-box" id="box-1009"></div>

 

componentCls:业务区分cls,最后会加入cls的坑,没有就等于baseCls,不入坑

            if (me.componentCls) {
                cls.push(me.componentCls);
            } else {
                me.componentCls = me.baseCls;
            }

 

contentEl:通过id,使用html模版,而非手写,非常方便的东西,尽管ext宣称无视html-.-

最终会: contentEl = Ext.get(me.contentEl);

 

draggable:拖拽,对方法的封装,在html面看不见变化

 

html:innerHtml,属于html片段