[Ext JS]组件与容器的选择与开发| 成都西华升腾科技有限公司

Ext JS开发大全

CmsWing

[Ext JS]组件与容器的选择与开发

## 组件与容器的选择与开发
在Ext JS中，容器类有很多种，而且存在继承关系，包括容器的超类（Container）、一般面板（Panel），表单面板，表格面板以及树面板等；组件类包括按钮、输入框、下拉单、文件上传等。
### 容器（Container）与面板（Panel）适用场景
父类组件能达成的效果，子类也可以达成，另外子类扩展了更多的功能，但也意味着需要更多的开销（主要是内存）。
Panel 是Container的子类，两者的适用场景如下：
Panel： 需求的UI效果需要有header(头部)、footer（底部）以及 toolbars（工具栏）
Ext.container.Container： 如果需求的UI组件包含其他的组件，但是又不需要Panel那么多的功能。
### 组件继承选择
Ext JS提供了丰富的组件类，如果现有组件不满足要求，可以继承已有类定义新的类。
Ext.Base是Ext JS的根类， 所有的原型和静态成员都会被其他类继承。继承的原则是找功能最接近的基类继承，这样既满足了需求，又节省了开销。UI组件类从Ext.Component及其子类上继承。
组件类定义的实例如下：
```javascript
Ext.define('My.custom.Component', { //组件类名  
	extend: 'Ext.Component',    //继承   
	newMethod : function() {
	//子类扩展的方法
	//...   
}});

```
继承的两个考虑点
类需要提供的功能
效率，最接近的基类。
### 面板与组件的功能和区别
面板类（Panel）的能力
UI界面大部分从Ext.panel.Panel继承， 该类的能力有：
Border 边框
Header：头部
Header toolbar： 头部工具栏
Footer： 脚部
Footer buttons: 脚部按钮
Bottom toolbar： 底部工具栏
包含和管理子组件
效果类似：
![](/upload/picture/2022-10-11/upload_d38c428ca0a7ab3f1ed47069b3064f86.png)
如果以上的部分不需要，则使用Panel就是浪费资源了。
扩展Ext.panel.Panel的类通常是特定应用程序使用，并且通常用于在配置的布局中聚合其他UI组件（通常是容器，或表单字段），并且在tbar和bbar提供操作组件的方法。
### 组件类（Component）的能力
如果UI组件不需要包含其他组件，只是包含HTML的形式的内容，则继承Ext.Component是比较合适的。
举例来看，一个包含HTML Image元素的组件，允许设置image的src属性， 触发load事件时显示。
对以上代码部分说明如下：
apply ( object, config, [defaults] ) 的作用是将第2、3参数复制到第一个参数。比如：
Ext.apply(obj, { a: 1 }, { a: 2 }); //obj.a === 1

alias:'widge.myImage',与xtype:'myImage',看起来作用相同。
以上实例仅演示，实际功能直接使用Ext.Img就可以。
XTypes和懒实例化
每种组件都有一个特性名字：xtype。 比如Ext.panel.Panel 的xtype的值是"panel"。
上面创建组件实例后添加到容器， 但一开始就把所有的组件实例好是比较耗费时间的。而且在应用中，可能有的组件都不用显示， 比如标签组件。
```javascript
Ext.create('Ext.tab.Panel', {   
	renderTo: Ext.getBody(), 
	height: 100, 
	width: 200,   
	items: [    
	{            
	// Explicitly define the xtype of this Component configuration.            // This tells the Container (the tab panel in this case)            // to instantiate a Ext.panel.Panel when it deems necessary        
	xtype: 'panel',      
	title: 'Tab One',       
	html: 'The first tab',     
	listeners: {      
	render: function() { 
	Ext.MessageBox.alert('Rendered One', 'Tab One was rendered.');     
	}         
	}   
	},    
	{      
	// xtype for all Component configurations in a Container            title: 'Tab Two',            html: 'The second tab',      
	listeners: {        
	render: function() {                
	Ext.MessageBox.alert('Rendered One', 'Tab Two was rendered.');          
	}    
	}    
	}   
]});
```

需要的时候再实例化。在items 中配置xtype。
### 组件的显示和隐藏
所有的组件都内置了show和 hide方法。
实现机制使用CSS的"display：none", 可以通过hideMode配置修改隐藏的方式。示例代码如下：
var panel = Ext.create('Ext.panel.Panel', {        renderTo: Ext.getBody(),        title: 'Test',        html: 'Test Panel',        hideMode: 'visibility' //隐藏模式     });    panel.hide(); // 隐藏面板    panel.show(); //显示面板

### 模板方法
Ext JS使用模板方法设计模式在父类中定义了一些方法， 方法内容由具体子类实现。
比如：Component中定义了render()方法，其负责组件渲染，render虽然不能被重写，但是它会调用onRender()方法，所以子类可以通过定义这个方法添加客制化逻辑。
调用逻辑如图：
![](/upload/picture/2022-10-11/upload_c47a3d673167dd582dc0d4f452256f94.png)
代码示例如下：
Ext.define('My.custom.Component', {    extend: 'Ext.Component',    onRender: function() {        this.callParent(arguments); // call the superclass onRender method        // perform additional rendering tasks here.    }});

### Container包含的模板方法有：
onBeforeAdd ， 在新组件添加之前调用。该方法传递新组件参数，可以用来修改。返回false中止操作。
onAdd，新组件添加后调用，传递已经添加的新组件，此方法可用于更新可能取决于子项状态的任何内部结构。
onRemove， 组件移除时调用， 传递已经移除的组件作为参数，此方法可用于更新可能取决于子项状态的任何内部结构。
beforeLayout:在布局子组件之前调用
afterLayout:在布局子组件之后调用
Panel提供的模板方法有：
afterCollapse：Panel收合后调用
afterExpand： Panel展开后调用
onDockedAdd: Docked(停靠)也就是工具栏。工具栏项次添加时调用
4.onDockedRemove：,工具栏项次移除时调用
注意：许多模板方法有一个对应事件，比如组件渲染之后有render事件，定义子类时，使用模板方法而不是事件来执行生命周期中的逻辑。原因是事件可以使用代码暂停，也可以通过处理器停止。
原则是能用模板方法就用模板方法。在组件中可以使用的模板方法有：
initComponent， 由constructor(构造函数)调用；用于初始化数据、设置配置项和添加事件处理。
beforeShow: 组件显示前调用
onShow: 显示的时候添加额外的行为，在调用父类onShow方法调用之后，组件会显示。
afterShow:组件显示后调用
onShowComplete： afterShow调用之后
onHide： 隐藏操作是添加额外的行为。调用父类的onHide方法后， 组件会被隐藏
afterHide： 隐藏后调用
onRender： 渲染阶段添加额外行为
afterRender： 渲染完成之后添加额外行为。在这个阶段，组件元素根据配置应用样式，可以添加额外的CSS配置，配置是否可见以及配置组件状态。
onEnable：在允许操作前添加额外行为。在调用父类的onEnable之后，组件会启用
onDisable： 在启用操作前添加额外行为。在调用父类的onEnable之后，组件会禁用
onAdded： 添加子组件时添加额外行为。在此阶段组件位于父容器的子项集合中。 调用超类的onAdded之后，将显示ownerCt引用，如果配置了ref，则将设置refOwner。
onRemoved：从父容器移除组件时添加额外内容。在此阶段，组件从父容器的子项中移除，但是没有被销毁。（除非父类的autoDestroy?配置为true，或是调用remove方法传递了销毁的第二个参数为true），将显示ownerCt引用，ownerCt和refOwner就不存在了。
onResize：调整大小时添加额外行为
onPosition：调整位置是添加额外操作
onDestroy：销毁操作添加额外行为，呼叫父类的onDestroy方法后，组件会被销毁
beforeDestroy： 组件销毁前调用
afterSetPosition： 组件位置被设置后调用
afterComponentLayout：组件布局后调用
beforeComponentLayout：组件布局前调用
### 组件浮动
使用CSS的绝对定位可以将组件浮动在文档流之外，不参与当前容器的布局。
-Windows这样的组件默认是浮动。
-通过float配置可以配置所有组件的浮动。
```javascript
var panel = Ext.create('Ext.panel.Panel', {     
	width: 200,      
	height: 100,            
	floating: true,       
	title: 'Test',         
	html: 'Test Panel'      
});    
panel.show();
```

一般的组件使用renderTo属性指定渲染的目的地，或者作为子组件添加到容器中。浮动组件不需要指定，其会在首次调用show()方法是自动渲染到文档内容（document body）。
浮动组件相关的配置：
draggable: 是否可以拖动
shadow： 客制组件的阴影外观
alignTo() :让组件对应到特定的元素
center(): 浮动组件居中放置在容器中

购物车

0 ITEMS ON YOUR CART

Ext JS开发大全

[Ext JS]组件与容器的选择与开发

网站导航