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 style="width:100%;height:100%;" 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.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 style="width:100%;height:100%;" 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'
}
]
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/28624388/viewspace-2143402/，如需轉載，請註明出處，否則將追究法律責任。