EXTJS 5 学习笔记2 - Components
2016-04-26 16:30:46 来源: 阅读:
1. The Components Hierachy 组件体系
2. XTypes and Lazy Instantiation xtype与延迟初始化
1) 每个component都有一个象征性的名字 xtype
2) 立即初始化: Ext.create() 延迟初始化: xtype
3. Showing and Hiding 显示与隐藏
1) 所有的组件都内置有show() 和 hide() 方法
2) 默认隐藏的css为display:none; 可以通过hideMode配置修改
4. Floating Components 浮动的组件
1) 浮动组件游离于绝对定位的文档流之外，且不参与容器的布局
2) 所有的组件都可以通过floating配置变成浮动组件
3) 浮动组件当show()方法被调用时会自动渲染到document.body下
4) 与浮动组件相关的配置和方法还有：draggable, shadow, alignTo(), center()
5. Creating Custom Components 定制个人组件
1) Composition or Extension 聚合还是扩展
2) Subclassing 子类
a. Ext.Base是所有EXTJS类的基石
3) Template Methods
a. EXTJS使用Template Method模式来把子类特定的方式委托到子类实例上
b. 在组件生命周期的特定阶段中每个继承链中的类都会负责一部分职责
c. Componenet.render()负责初始化组件渲染阶段，且不能被覆盖；render()会调用onRender(), 子类可以覆盖onRender()方法以实现特有的显示样式
.png)
Ext.define("My.own.Component', {
extend: 'Ext.Component',
onRender: function() {
this.callParent(arguments);
//perform additional rendering tasks here
...
}
});
d. 注意，必须在使用template methods在生命周期重要的阶段进行业务操作，而不是在事件。因为事件可以被程序挂起或阻止
e. 以下模板方法可以在构建子类时进行覆盖
initComponent被构造函数调用；用以初始数据、建立配置、绑定事件响应等beforeShow在组件被显示之前调用onShow允许在显示过程中增加额外的操作；一旦父类的onShow()方法返回，组件就已经可见afterShow在组件被显示之后调用onShowComplete在组件afterShow()方法完成之后调用onHide允许在隐藏过程中增加额外的操作；一旦父类的onHIde()方法返回，组件就已经隐藏afterHide在组件被隐藏之后调用onRender允许在组件渲染过程中增加额外的操作afterRender允许在组件渲染之后增加额外的操作。在这个阶段组件的样式、可见性、状态等已经生效onEnable允许在组件启用过程中增加额外的操作。一旦父类的onDisable()方法返回， 组件就已经启用。onDisable允许在组件禁用过程中增加额外的操作。一旦父类的onDisable()方法返回， 组件就已经禁用。onAdded允许在组件在加入到容器过程中增加额外的操作。在这个阶段组件已经在容器的items集合中。 一旦父类的onAdded()方法返回，ownerCt引用就已经存在。onRemoved允许在组件在从容器移除过程中增加额外的操作。在这个阶段组件已经从容器的items集合中移除但还未销毁。 一旦父类的onRemoved()方法返回，ownerCt引用就已经消失。onResize允许在组件resize过程中增加额外的操作。onPosition允许在组件定位过程中增加额外的操作。onDestroy允许在组件销毁过程中增加额外的操作。一旦父类的onDestroy()方法返回， 组件就已经销毁。beforeDestroy允许在组件销毁之前中增加额外的操作。afterSetPosition允许在组件位置设定之后中增加额外的操作。afterComponentLayout允许在组件布局完成之后中增加额外的操作。beforeComponentLayout允许在组件布局完成之前中增加额外的操作。