StupidBeauty
Read times:765Posted at:Mon Jan 6 22:27:08 2014
- no title specified

Ext JS 4.2.0文档翻译: Ext.Component

Ext 中所有组件(components)的基类。

Component这个基类,内置了对于以下基本功能的支持:隐藏/显示,启用/禁用,尺寸控制。

xtypes

每个组件都有一个特殊的xtype,这是该组件所对应的Ext类型名字,另外还有配套的方法可用于检查它的xtype,例如getXTypeisXType。参考组件向导,以了解关于xtypes的更多信息以及组件的层次关系。

寻找组件

所有的组件在创建时都会注册到Ext.ComponentManager,这样的话,在任何时候,都可以向Ext.getCmp方法中传递该组件的id以引用到它。

另外,还可以使用Ext.ComponentQuery,它提供了一种类似于CSS选择器的方式来通过xtype 及其它狠多属性来寻找到特定的组件。例如,以下代码会寻找到所有位于id 'myform'的组件中的文字区域(textfield)组件:

Ext.ComponentQuery.query ('#myform textfield');

扩展Ext.Component

Component 的所有子类都可以参与到Ext 组件的由Container类所提供的自动化生命周期(创建、渲染和销毁)控制过程中去。组件,可在某个容器(Container)被创建时便通过items配置选项添加到该容器中去,或者也可以通过add方法来动态地添加进去。

所有由用户开发并且需要参与到自动化的生命周期管理及尺寸管理过程中去的那些可视化部件,都应当继承Component类。

参考组件向导中的创建新用户界面控件一章,以了解如何通过扩展或增强Ext JS基类的方式来创建自定义的组件。

Ext.Component类本身

通常情况下,我们不需要实例化Ext.Component这个类。有各种各样的子类,分别实现了不同情景下的功能,足以满足大部分的程序需求。然而,仍然可以实例化一个基类Component对象,并且可将它渲染到文档中去,或者加入到某个容器的布局中去作为一个子代条目使用:

Ext.create (' Ext.Component ', {

html: 'Hello world!',

width: 300,

height: 200,

padding: 20,

style: {

color: '#FFFFFF',

backgroundColor:'#000000'

},

renderTo: Ext.getBody ()

});

上面代码中创建的Component对象,会在渲染时创建它的包装div,并且使用妳所配置的HTML作为它的内容。还可以使用renderTpl这个配置选项来创建出更复杂的内部结构,当然,要想显示以数据库支撑的海量数据的话,我们还是建议使用 ExtJS 中的某个基于数据的组件,例如ViewGridPanelTreePanel

来自Ext.layout.container.border.Region的覆盖:这个覆盖为 Ext.Component 提供了额外的与边框布局(border layout)相关的方法。 Ext.layout.container.Border 类要求进行这种覆盖,这样的话,就可以只在那此使用了border 布局的打包代码中包含这里所加入的功能了。

配置选项

Ext.AbstractComponent

cls : String

向这个组件的元素(Element)中添加的一个可选的额外的CSS类。利用这一点,可以通过标准的CSS 规则向本组件或者它的子代组件添加自定义的外观。

默认值: ''

自此版本开始可用: 1.1.0

Ext.AbstractComponent

contentEl : String

指定一个已有的HTML元素,或者是一个已有的HTML 元素的id ,该元素会被用作这个组件的内容。

使用这个配置选项,可将一个已有的HTML元素抽出,放置到一个新的组件的布局元素中(它所做的事其实就是在该组件被渲染之后将指定的DOM元素做一次移动)用作内容。

注意:

所指定的HTML元素会在插入了任何已配置的 HTML 之后被追加到此组件的布局元素中去,因此,当render事件被触发时,文档中还没有包含这个元素。

所指定的HTML元素不会参与到这个组件可能会使用的任何 布局 模式中。它仅仅是HTML。布局会对子代 条目 做操作。

向组件添加一个x-hiddenx-hide-display CSS类,以避免在该内容被渲染到面板中去之前发生明显的闪烁。

自此版本开始可用: 3.4.0

Ext.AbstractComponent

xtype : Ext.enums.Widget

这个属性使得妳可以拿一个较短的别名来代替完整的类名以用来创建对象。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'

})

]

假如妳使用xtype的话,以上代码可以这样写:

items: [

{

xtype: 'textfield',

fieldLabel: 'Foo'

},

{

xtype: 'textfield',

fieldLabel: 'Bar'

},

{

xtype: 'numberfield',

fieldLabel: 'Num'

}

]

如果狠多条目都共用相同的xtype,那么,可使用Ext.container.AbstractContainer.defaultType来为所有未明确指定xtype 的条目指定其xtype

defaultType: 'textfield',

items: [

{ fieldLabel: 'Foo' },

{ fieldLabel: 'Bar' },

{ fieldLabel: 'Num', xtype: 'numberfield' }

]

这样,items 数组中的每个成员就仅仅是一个“配置对象”了。这些对象被用来创建及配置组件实例。可使用Ext.widget来利用一个配置对象手动地实例化一个组件:

var text1 = Ext.create (' Ext.form.field.Text ', {

fieldLabel: 'Foo'

});

// 或者也可以这样写:

var text1 = Ext.widget ({

xtype: 'textfield',

fieldLabel: 'Foo'

});

当一个容器在它的{Ext.container.AbstractContainer.initComponent}过程中被创建时,便会将以上所说的配置对象转换成实例化的组件。同时,items这个数组也会从原始数组转换成一个Ext.util.MixedCollection实例。

妳可以为妳自定义的组件定义自己的xtype,具体做法就是在Ext.define中指定xtype 属性。例如:

Ext.define ('MyApp.PressMeButton', {

extend: ' Ext.button.Button ',

xtype: 'pressmebutton',

text: 'Press Me'

});

给自定义组件命名xtype 时,要格外小心,因为,所有的xtypes 都共用一个唯一的命名空间(scope)。第三方的组件应当考虑加上一个前缀以避免名字冲突。

Ext.define ('Foo.form.CoolButton', {

extend: ' Ext.button.Button ',

xtype: 'ux-coolbutton',

text: 'Cool!'

});

参考Ext.enums.Widget以了解目前可用的xtypes 列表。

自此版本开始可用: 2.3.0

未知美人

Your opinions
Your name:Email:Website url:Opinion content:
- no title specified

HxLauncher: Launch Android applications by voice commands