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’
     }
 ]

PS:如果您想和业内技术大牛交流的话,请加qq群(527933790)或者关注微信公众 号(AskHarries),谢谢!

转载请注明原文出处:Harries Blog™ » Ext.js4.2.1 Ext.Component

赞 (0)

分享到:更多 ()

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址