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片斷