[ExtJS5学习笔记]第七节 Extjs5的组件components及其模板事件方法学习

本文地址：http://blog.csdn.net/sushengmiyan/article/details/38487519

本文作者：sushengmiyan

-------------------------------------------------------------资源链接-----------------------------------------------------------------------

翻译来源  Sencha Cmd官方网站： http://www.sencha.com/products/extjs/up-and-running/concepts-components/

------------------------------------------------------------------------------------------------------------------------------------------------

一个EXT JS的应用程序的UI用户界面是有一个或者多个部件构成的组件。所有的组件都是Ext.Component类的子类，允许它们参与自动化生命周期管理包括实例化，渲染，大小，定位还有销毁。Ext JS提供了一系列有用的组件，任何组件可以很容易地扩展到创建一个定制的组件。

组件的继承关系

容器是一个特殊的组件类型，它可以包含其他组件。一个典型的应用程序是有许多嵌套的组件像树状结构哪有的组件继承结构。容器负责管理他们的子组件的生命周期，包含创建，渲染，大小还有位置和销毁。一个典型的应用程序的组件继承从顶层的Viewport开始，它还有其它的容器嵌套在里面。

子组件通过使用容器的items配置增加到容器中，下面的例子使用Ext.create()创建初始化了两个面板，然后作为Viewport的子组件增加到Viewport中。

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 ]
});

容器使用布局管理器来管理组件的大小还有位置，想要获取关于布局的更多信息，请访问 布局和容器指南

XTypes和懒加载

每一个组件都有一个符号名叫做xtype。像Ext.panel.Panel就有一个xtype名叫做‘panel’， 组件的API文档 列出了所有的组件的xtype。上面的例子展示了如何增加一个已经存在的组件到一个容器中。然而，在大型的应用程序中，着不是理想的，因为不是所有的组件都要被实例化，一些组件可能永远不需要被初始化，这取决于你的应用程序。例如，一个使用tab panel的应用程序只需要获取用户点击之后的那个tab的内容。这就是xtypes派上用处的地方通过允许容器的孩子在前置进行配置，需要的时候才进行实例化。

下面的示例代码演示了懒实例化和呈现一个使用选项卡面板的容器的子组件。每个标签都有一个事件侦听器，显示一个警告标签时呈现。

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.');
                    }
                }
            }
        ]
    });

允许这段代码，会立即产生第一个tab的alert弹出框。这个发生是因为这是默认的tab页签，所以容器就立即调用病实例化容器的Tab Panel。

第二个tab框直到点击的时候才会弹出，这就显示了需要的时候才会渲染，就是说tab页签激活的时候才会通知render事件。

显示和隐藏

所有的组件都是在show和hide方法中构造的。用来隐藏组件的默认的css方法是“display:none”但是通过hidemode配置的时候就有所变化了：

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

浮动组件

浮动组件是通过css绝对路径将文档放置在外的，并且不在参与组件的容器的布局的。有些组件像Windows是默认的浮动，所有的组件都可以通过配置来实现浮动：

var panel = Ext.create('Ext.panel.Panel', {
    width: 200,
    height: 100,
    floating: true, // make this panel an absolutely-positioned floating component
    title: 'Test',
    html: 'Test Panel'
});

上述代码初始化了一个panel，但是没有渲染。正常情况下，一个组件或者有一个renderTo配置或者当做一个子组件增加到组件的容器中，但是当是浮动组件的时候，都不需要了。浮动组件会在第一次调用show方法的时候被渲染

panel.show(); // render and show the floating panel

下面有一些对浮动组件来说可以进行配置的一些方法

1.draggable:可以拖动屏幕周围浮动组件。

2.shadow:定制的外观浮动组件的影子。

3.alignTo:将浮动组件指定到特定的元素。

4.center() 将组件浮动到组件的中心

创建自定义组件

成分或者扩展

当创建一个新的UI类的时候，该类必须做出决定是否应该拥有一个组件的一个实例,或扩展组件

根据功能需要继承一个最近的基类是被推荐的。这是因为EXT JS提供的自动生命周期管理包含了当需要的时候自动渲染，自动大小，自动调整位置当通过布局管理的时候，也会自动的从容器中移除和销毁。

通过组建创建新类比较容易，不推荐使用一个新的类拥有一个组件在外部去渲染和管理。

子类

类系统 让扩展extjs框架变得非常容易。Ext.Base是所有Ext JS类的构建块,原型和这个类的静态成员被其他类继承。

尽管你可以再低水平的情况下增加一个方法，但是开发人员在通常情况下会想通过高一点的继承链来开始。

下面这个例子创建了一个Ext.Component的子类：

Ext.define('My.custom.Component', {
    extend: 'Ext.Component',

    newMethod : function() {
       //...
    }
});

这个例子创建了一个新的类‘My.custom.Component’，它继承了Ext.Component的所有方法属性等。

模板方法

EXT JS使用 模板方法模式 代表子类，行为。

这意味着，在继承链中的每一个类都可能贡献一个额外的逻辑组件的生命周期中的某些阶段。每一个类实现自己的独有的行为，并且允许其他继承自这个类的实现自己特有的逻辑。

典型例子就是 渲染 方法，render 是定义在Component类中的一个方法，它对初始化组件的呈现阶段生命周期负责。render不能被重写，但是可以调用onRender方法在处理子类实现的时候可以调用来实现自己的特有属性方法。每一个onRender方法必须调用父类的onRender方法在贡献自己额外逻辑的时候。

下面的表格展示了onRender模板方法的功能。

render方法被调用（通过布局管理器来实现的）。这个方法不能被重写也是通过Ext基类实现的，它调用this.onRender方法，这个方法实现了当前子类（如果被实现了的话）。这个就调用父类的版本，以此类推。最终，每个类贡献了自己的功能，控制返回render方法。

下面是一个组件子类实现onRender的例子：

Ext.define('My.custom.Component', {
    extend: 'Ext.Component',
    onRender: function() {
        this.callParent(arguments); // call the superclass onRender method

        // perform additional rendering tasks here.
    }
});

需要值得注意的是，许多模板方法都有自己对应的事件，例如渲染事件，是在渲染事件出发的时候执行。然而，当子泪花的时候，它必须使用模板方法在重要声明周期阶段执行类逻辑而不是事件。事件可以通过编程来停止或者暂停。

下面是一些子类可以实现的组件的模板方法：

initComponent:这个方法被类构造方法唤醒，用来初始化数据，设置属性，附加事件处理。

beforeShow:在组件显示之前被调用

onShow: 允许添加行为操作，在超类的onShow方法被调用之后就组件就可见了。

afterShow: 方法在组件被显示之后调用。

onShowComplete:这个方法在afterShow完成之后被调用

onHide:在隐藏的时候可以增加一些操作，调用超类的onHide方法之后，组件就看不见了。

afterHide:组件隐藏之后的事件处理

onRender:渲染的时候执行的事件

afterRender:渲染完成之后可以增加的额外操作。在你这个阶段，组件的元素已经根据配置或者css雷鸣增加了类型，并且将会被配置可见性和启用状态。

onEable:组件可用性，调用超类的这个事件的时候，组件就可以使用了

onDisable:组件不可用处理的时候的事件。

onAdded:当组件被增加的时候，组件被增加到容器的时候。在这个阶段，组件在父类容器的子条目集合中，当调用超类的这个方法之后，容器就是被展现，如果有引用，引用也会被设置。

onRemoved:被移除的时候的事件。这时候，组件以及从父容器之中移除了，但是还没有销毁。调用超类的这个方法之后，容器就不会被展现了。

onResize:大小变化的时候的调用事件

onPosition:位置变化的时候调用的事件

onDestroy:销毁的时候的事件

beforeDestroy:销毁之前

afterSetPosiotion:设置位置之后

afterComponentLayout:组件布局之后

beforeComponentLayout:组件布局之前

我们该扩展哪个类

选择一个最好的继承类是一个效率的问题，功能基类必须要提供的。有一种趋势就是总是继承Ext.panel.Panel当你设置UI组件的时候，这些组件需要被渲染和管理的时候。

Panel类有如下能力：

Boder

Header

Header Tools

Footer

Footer Buttons

Top toolbar

Buttom toolbar

Containig and managing child Components

如果这些不需要，那么使用Panel类就是一种资源浪费。

组件

如果需要的组件UI不需要包含其他组件，那就是，如果只是封装HTML执行某种形式的需求，那么扩展Ext.Component是合适的。举例来说，下面这个类是一个组件包装了HTML的图片元素，允许通过图片的src属性来设置和获取。在加载的时候也会有方法被触发。

Ext.define('Ext.ux.Image', {
    extend: 'Ext.Component', // subclass Ext.Component
    alias: 'widget.managedimage', // this component will have an xtype of 'managedimage'

    autoEl: {
        tag: 'img',
        src: Ext.BLANK_IMAGE_URL,
        cls: 'my-managed-image'
    },

    // Add custom processing to the onRender phase.
    // Add a 'load' listener to the element.
    onRender: function() {
        this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);
        this.callParent(arguments);
        this.el.on('load', this.onLoad, this);
    },

    onLoad: function() {
        this.fireEvent('load', this);
    },

    setSrc: function(src) {
        if (this.rendered) {
            this.el.dom.src = src;
        } else {
            this.src = src;
        }
    },

    getSrc: function(src) {
        return this.el.dom.src || this.src;
    }
});

使用如下：

var image = Ext.create('Ext.ux.Image');

Ext.create('Ext.panel.Panel', {
    title: 'Image Panel',
    height: 200,
    renderTo: Ext.getBody(),
    items: [ image ]
});

image.on('load', function() {
    console.log('image loaded: ', image.getSrc());
});

image.setSrc('http://www.sencha.com/img/sencha-large.png');

这只是一个例子给展示而已，你想使用的话，应该结合实际应用程序来设计。

Container容器

如果组件包含其他组件，那么就选容器比较适合了。在面板级别，需要重点记忆的是，Ext.layout.container.Container不是用来被渲染和管理子组件的。

容器拥有下面这些方法：

onBeforeAdd:子组件增加的时候这个方法被调用。通过了新组件,可以用来修改组件,或准备容器。返回false中止添加操作。

onAdd:组件被增加完成的时候调用。它是通过组件已被添加。这种方法可以用于更新任何内部结构可能依赖于状态的子元素。

onRemove:它是通过组件已被添加。这种方法可以用于更新任何内部结构可能依赖于状态的子元素。

beiforeLayout:这个方法被调用之前容器已经制定了(如果需要)并呈现它的子组件。

afterLayout:调用该方法后,集装箱已经制定了(如果需要)并呈现它的子组件。

Panel面板

如果UI界面需要头信息，底部信息，工具条，那么Ext.panel.Panel就是一个合适的选择。

重要的是:一个面板是一个容器。重要的是要记住,布局是用于呈现和管理子组件。

这类扩展Ext.panel。面板通常非常特定于应用程序的,一般用于聚合其他UI组件(通常是容器,或表单字段)配置布局,并提供操作手段所包含的组件通过控制tbar bbar。

面板拥有如下的模板方法：

afterCollapse:当折叠的时候被调用

afterExpand:当展开的时候被调用

onDockedAdd:当停靠的时候调用

ondockedRemove当停靠移除的时候调用。