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 this
component
    });

    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