extjs6自定义组件

新的公司并没有用mvvm框架，用的是extjs这个mvc框架，由于之前没接触过，用了一个星期了解了大致的框架，发现extjs用来开发富客户端应用还是很有用的，而且样式统一，组件功能大致齐全，可以满足正常的使用，目前需要做一个时间轴无线滚动效果，发现没适合组件，只得自己开发。

组件定义

组件定义需要继承 Component 这个类

Ext.define('My.custom.Component', {
    extend: 'Ext.Component',
    newMethod : function() {
       自定义方法
    },
    onRender: function() {
        this.callParent(arguments); // 必须调用父级类来管理生命周期
        // render后处理代码
    }
});

这里的 onRender 是Extjs的基类的生命周期方法，这样声明不会覆盖基类的方法，使用这些方法需要调用父级的方法，才能正确地调用，类似的方法还有（不用翻译了）

initComponent This method is invoked by the constructor. It is used to initialize data, set up configurations, and attach event handlers.
beforeShow This method is invoked before the Component is shown.
onShow Allows addition of behavior to the show operation. After calling the superclass's onShow, the Component will be visible.
afterShow This method is invoked after the Component is shown.
onShowComplete This method is invoked after the afterShow method is complete
onHide Allows addition of behavior to the hide operation. After calling the superclass's onHide, the Component will be hidden.
afterHide This method is invoked after the Component has been hidden
onRender Allows addition of behavior to the rendering phase.
afterRender Allows addition of behavior after rendering is complete. At this stage the Component's Element will have been styled according to the configuration, will have had any configured CSS class names added, and will be in the configured visibility and the configured enable state.
onEnable Allows addition of behavior to the enable operation. After calling the superclass's onEnable, the Component will be enabled.
onDisable Allows addition of behavior to the disable operation. After calling the superclass's onDisable, the Component will be disabled.
onAdded Allows addition of behavior when a Component is added to a Container. At this stage, the Component is in the parent Container's collection of child items. After calling the superclass's onAdded, the ownerCt reference will be present, and if configured with a ref, the refOwner will be set.
onRemoved Allows addition of behavior when a Component is removed from its parent Container. At this stage, the Component has been removed from its parent Container's collection of child items, but has not been destroyed (It will be destroyed if the parent Container's autoDestroy is true, or if the remove call was passed a truthy second parameter). After calling the superclass's onRemoved, the ownerCt and the refOwner will not be present.
onResize Allows addition of behavior to the resize operation.
onPosition Allows addition of behavior to the position operation.
onDestroy Allows addition of behavior to the destroy operation. After calling the superclass's onDestroy, the Component will be destroyed.
beforeDestroy This method is invoked before the Component is destroyed.
afterSetPosition This method is invoked after the Components position has been set.
afterComponentLayout This method is invoked after the Component is laid out.
beforeComponentLayout This method is invoked before the Component is laid out.

实战例子

结合官方的图片组件例子

Ext.define("extjsapp.view.component.Cimage", {

    extend: "Ext.Component",
    alias: "widget.cimage",

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

    width: 100,
    height: 200,

    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);  // 触发组件load监听事件
    },

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

在使用过程中，如果是动态创建实例的话，可以这样使用，在 initComponent 初始化完成后动态添加组件

initComponent: function () {
    this.callParent(arguments);
    var image = Ext.create("extjsapp.view.component.Cimage");
    image.autoEl = {
        tag: "img",
        src: 'http://pic002.cnblogs.com/images/2011/25284/2011073021343525.png'
    };
    image.on('load', function () {
        console.log(image.getSrc());
    });
    this.add(image);
}

如果用 requires 引入组件，由于是对象添加的，怎么监听这个load和src方法呢？答案是 listeners ，使用方法如下

{
    xtype: "cimage",
    autoEl: {
        tag: "img",
        src: "http://pic002.cnblogs.com/images/2011/25284/2011073110511462.png"
    },
    listeners: {
        load: function() {
            console.log(this.getSrc());
        }
    }
}