Ext JS 5(三)组件

组件

组件是Ext JS 项目中用来构成用户界面的。
容器是组件中特殊的部分，用来装载其他组件。

var childPanel1 = Ext.create('Ext.panel.Panel', {    title: 'Child Panel 1',    html: 'A Panel'});var childPanel2 = Ext.create('Ext.panel.Panel', {    title: 'Child Panel 2',    html: 'Another Panel'});Ext.create('Ext.container.Viewport', {    items: [ childPanel1, childPanel2 ]});

Ext.container.Viewport代表浏览器窗口的整个区域，将document body作为渲染对象，它会根据浏览器窗口的大小自动调整自身的尺寸，在一个页面中只允许出现一个Viewport实例。此外它没有提供对滚动条的支持，如果需要使用滚动条需要在其子面板中进行设置。
Ext.panel.Panel也是容器，在Ext项目中特别常用。

xtype

每个组件都有自己的xtype，比如Ext.panel.Panel的xtype是‘panel’，除了上面那个例子我们还可以以xtype的形式给容器添加组件：

 Ext.create('Ext.tab.Panel', {        renderTo: Ext.getBody(),        height: 100,        width: 200,        items: [            {                xtype: 'panel',                title: 'Tab One',                html: 'The first tab',                listeners: {                    render: function() {                        Ext.MessageBox.alert('Rendered One', 'Tab One was rendered.');                    }                }            },            {                title: 'Tab Two',                html: 'The second tab',                listeners: {                    render: function() {                        Ext.MessageBox.alert('Rendered One', 'Tab Two was rendered.');                    }                }            }        ]    });

说的直白一些，xtype是组件的小名。有关其他组件的xtype可以查询API 的头部位置。

hide & show

组件提供了显示以及隐藏的方法

var panel = Ext.create('Ext.panel.Panel', {        renderTo: Ext.getBody(),        title: 'Test',        html: 'Test Panel',        hideMode: 'visibility' // use the CSS visibility property to show and hide thiscomponent    });    panel.hide(); // hide the component    panel.show(); // show the component

自定义组件

记得上篇类是怎么自定义的么，自定义组件也是一样的方式。

Ext.define('My.custom.Component', {    extend: 'Ext.Component',    newMethod : function() {       //...    }});

Template method pattern

extjs 提供了很多模板方法，在自定义组件时起到重要的作用。

• initComponent ：该方法由构造函数调用。它是用来初始化数据，设置配置，并处理事件程序。
• beforeShow ： 这个方法在显示该组件之前被调用。
• onShow : 允许在显示操作时附加操作，在父类的onShow执行之后组件将会显示。
• afterShow : 这个方法在组件显示之后执行。
• onShowComplete： 在afterShow 执行完成之后执行。
• onHide ： 在组件隐藏时的附加操作，在父类的onHide执行之后组件将会隐藏。
• afterHide : 在组件隐藏之后执行。
• onRender
• afterRender