小编给大家分享一下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:
click me 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 : '
'
}
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：'
'
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是什么”有了一定的了解，如果想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
分享名称：Ext.js4.2.1中Ext.Component是什么
URL分享：
http://cdkjz.cn/article/pioicd.html
