溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下Ext.js4.2.1中Ext.Component是什么，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
一：簡介
Ext.Component是其他組件的基類，可以說是Ext.js框架里邊最為基礎的一個類。
Component基類支持hide/show、enable/disable基本事件操作。
每個component都有一個唯一的xtype. 可以通過getXType或者isXType獲取相關信息。
所有的component都是通過Ext.ComponentManager進行構造，所以可以通過Ext.getCmp(id),獲取相關component.
Ext.ComponentQuery是一個CSS選擇器 如：Ext.ComponentQuery.query('#myform textfield') 返回id為myform的component下所有的textfield.
所有的子類組件都自動的參與Ext component的生命周期。 包括創建，渲染和銷毀。這些是由Ext.Container類提供。
在Ext.Comtainer創建的同時，可以通過的其items配置項來添加組件，除了這個方法，還可以通過Ext.Container的add方法動態地添加進容器里邊。
二：Config項介紹
1. autoEl: 通過一個tag或者Dom 定義來創建Component內的元素。
如：
Ext.onReady(function() {
var com=Ext.create('Ext.Component',{
renderTo: Ext.getBody(),
autoEl:{
tag:'a',
html: 'click me',
href:'javascript:alert(%22Clicked!%22)'
}
});
alert(com.getEl());
});
生成的HTML:
<body class="x-body x-webkit x-chrome" id="ext-gen1018">
<a class="x-component x-component-default x-border-box" href="javascript:alert(%22Clicked!%22)" id="component-1009">click me</a>
</body>
2.autoRender
此屬性主要針對的是非浮動component,用來代替renderTo,與autoShow配合使用，根據構造函數指定渲染位置。如果為true,首先渲染到body.
Ext.onReady(function() {
var com=Ext.create('Ext.Component',{
//renderTo: Ext.getBody(),
autoRender:true,
autoShow:true,
autoEl:{
tag:'a',
html: 'click me',
href:'javascript:alert(%22Clicked!%22)'
}
});
});
3.autoScroll
是否顯示滾動條
4.autoShow
針對浮動組件或者使用autoRender的組件
5.baseCls
指定組件基礎的CSS類，默認是'x-component'
6.border
指定組件的邊框大小，可以是一個指定的數字，也可以是CSS格式 如：'10 5 3 10'(上，右，下，左)
7.cls
客戶自定義的CSS類
8.columnWidth
column布局的寬度，可以是數字或百分比
9.constrain:
表示用于限制窗口在移動時不得超出瀏覽器邊界
10. constrainTo
將浮動組件限制在一個區域內
11.contentEl
把一個已經存在的HTML元素，作為當前component的內容 如：
contentEl: 'content',
renderTo: 'content-div'
表示把 id 為content 的內容移到 content-div 下面。
12.defaultAlign
對齊方式，通過指定的錨點將此元素與另一個元素對齊。默認值為"tl-bl?"
tl 左上角(top left corner)
t 上邊界(top edge)的中心
tr 右上角(top right)
l 左邊界(left edge)的中心
c 元素的中心(center)
r 右邊界(right edge)的中心
bl 左下角(bottom left)
b 下邊界(bottom edge)的中心
br 左下角(bottom right)
13.disabled
14.disabledCls
失效時的Class類
15.draggable
針對浮動窗口，是否可拖動。
16.fixed
17.floating
浮動窗口，Window和Menu 默認為浮動窗口
18. formBind
更加form的狀態來綁定當前組件的狀態
如：me.buttons = [{
text : '保存',
formBind : true,
scope : me,
handler : me.onRegister
}, {
text : '重置',
scope : me,
hidden : me.isUpdate,
handler : me.onReset
}, {
text : '關閉',
scope : me,
handler : me.onCancel
}]
保存按鈕與表單的驗證綁在了一起。
19.height
20.hidden
21.hideMode:String
'display'或'display:none'
'visibility'或'visibility:hidden'
'offsets': 在指定的區域內可見
22.html
HTML片段，或者Dom定義用來進行布局。HTML內容在Component被渲染之后添加。
如：{
xtype : 'panel',
border : false,
html : '<iframe frameborder="0" src="http://idatadev.gemdale.com:8088/Gem-web/open/#/app/client/details/'+this.custCode+'"></iframe>'
}
23.id
itemId是用于container底下的元件的。這也說明itemId僅僅是一個局部的元件標識名稱，在全局上是不須要遵循唯一性的。
id： Ext.getCmp(id)；
itemId：Ext.getCmp(id).getComponent(itemId)；
24.lieteners
初始化時添加事件處理器。
25.loader
為組件加載外部的內容
如： Ext.create(
'Ext.Component',{
loader : {
url: 'content.html',
autoLoad : true
},
renderTo:Ext.getBody()
}
);
26.margin
27.maxHeight
28.masWidth
29.minHeight
30.minWidth
31.overCls
設置數據這元素上面移動時的CSS類
32.overflowX
33.overflowY
34.padding
35.plugins
添加組件到component中
如：xtype : 'grid',
region : 'center',
viewConfig : {
enableTextSelection : true
},
plugins : [ Ext.create(
'Ext.grid.plugin.CellEditing', {
clicksToEdit : 1
// 設置單擊單元格編輯
}) ]
36.region
border布局時，定義不同的區域,其中必須要有一個center區域
north--top
sourth--bottor
east--right
west--left
center--center
37.renderTpl
渲染模板，用于自定義組件，Ext 的模板類是一個功能非常強大類，可支持子模板、模板表達式等的功能。此處的模板就是勾勒整個組件的骨架脈絡。
Component的renderTpl只是一個div,因為它是一個基類，具體內容需要特定的子類所決定。
如果創建一個組件需要額外的元素，他們現在將被一個XTemplate（tenderTpl）處理。XTemplate的數據將從renderData對象讀取，并且生成的元素可以通過組件實例的renderSelectors屬性訪問。
renderSelectors的作用域是基于base div元素并且可以使用標準的css選擇器。這些元素引用是組件生命周期的一部分，并且將在組件銷毀時被自動移除。
當定義一個新的Component時，可以覆蓋原有的renderTpl:'div'配置項屬性。
如：renderTpl：'<div><img src="afoo.jpg" mce_src="afoo.jpg" /><input type="checkbox" /></div>'
38.renderData
為renderTpl提供數據，這些數據主要填充組件的以下屬性
id,ui,uiCls,baseCls,ComponentCls,frame
39.renderSelectors
40.renderTo
41.resizable
重新設置大小
42.shadow
43.shadowOffset
44.style
組件元素的自定義樣式
45.width
46.xtype
items: [
Ext.create('Ext.form.field.Text', {
fieldLabel: 'Foo'
}),
Ext.create('Ext.form.field.Text', {
fieldLabel: 'Bar'
}),
Ext.create('Ext.form.field.Number', {
fieldLabel: 'Num'
})
]
====>
items: [
{
xtype: 'textfield',
fieldLabel: 'Foo'
},
{
xtype: 'textfield',
fieldLabel: 'Bar'
},
{
xtype: 'numberfield',
fieldLabel: 'Num'
}
]
看完了這篇文章，相信你對“Ext.js4.2.1中Ext.Component是什么”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
