如何透过扩展现有类的能力来创建用户自定义界面的控件

组合或扩展

当创建一个新类，往往要作出这么的一个选择：要么拥有某个工具类的实例来扮演首要的角色，要么扩展那个类。

使用ExtJs过程中，推荐从最靠近的基类开始扩展，实现所需的功能即可。这是因为Ext提供的自动生存周期引入了自动渲染的机制、自动大小调整和承担接受来自布局管理器的UI组件布局调控，还有在容器（Container）中自动销毁的功能。

组织一个新类，它就是ExtJs的类，实现起来是很方便的，这就会导致了Container→Component层次的形成，相比较，新类拥有一个ExtJs类的话，必须从外围对其渲染和组织。
The Template method Pattern模板方法模式

Ext Js的Component的继承层次采用Template Method pattern（模板方法模式）来委派给子类，交由子类来负责其特定的行为。

其意义在于，继承链中的每个子类得以在，组件生存周期的某个阶段内，“提交（contribute）”额外的逻辑功能。这样每一个类拥有属于其自身的行为；其他类加入自己的行为时也不会相互造成影响。

其中一个例子是render（渲染）函数。render函数不能够被覆盖，应该是一层一层地在各子类的实现中加入onRender方法，那么render函数就会在执行的时候把各onRender方法访问调用。每一个onRender方法必须调用其父类的onRender方法继而再“埋头处理（contribute）”自己（子类）的逻辑部分。

下面的图例演示了模板方法onRender的机能过程。

render是由容器的布局管理器（Container’s layout manager）负责调用。该方法的实现不能被“冲掉（overridden）”，它是由Ext基类提供的。this.onRender表示当前子类所写的实现（如有提供的话）。它会访问父类的版本、父类的版本又会调用父、父类的版本……最终，每个类完成了其功能，render函数的返回值对生存周期进行控制。

Image:Classflowchart.PNG

在ExtJS组件（Component）生存周期中，提供了若干有意义的模板方法以实现类特定的逻辑功能。

强调： 当编写子类时，模板方法应在实例化的过程中调用，属于生存周期内的一部分的动作，而不应是事件的一部分。事件有可能会由handler挂起，或中止。

以下是Component子类都可享有的模板方法：

    * onRender

    允许渲染期间加入特定的行为。父类的onRender被调用后，可以确定组件的Element元素。可以在此阶段中执行剩余DOM任务以完成结构上的控制（HTML结构）。

    * afterRender

    允许渲染完成后加入特定的行为。此阶段的组件元素会根据配置的要求（configuartion）设置样式，会引入已配置的CSS样式名称所指定的样式名称，并会配置可见性（visibility）和配置可激活（enable）情况。

    * onShow

    允许在显示组件的同时加入特定的行为。父类的onShow执行过后，Componenet将会显示。

    * onHide

    允许在隐藏组件的同时加入特定的行为。父类的onHide执行过后，Componenet将会隐藏。

    * onDisable

    允许在禁用组件的同时加入特定的行为。父类的onDisable执行过后，Componenet将会禁用。

    * onEnable

    允许在激活组件的同时加入特定的行为。父类的onEnable执行过后，Componenet将会激活启用。

    * onDestroy

    允许在销毁组件的同时加入特定的行为。父类的onDestroy执行过后，Componenet将会被销毁。

Ext组件类的各层次中的均有其自身的模板方法，我们可以打开来看看，这些都是根据自身不同的需求而作出的设计。

提示： 当调用父类的模板方法时，最简洁的方法就是使用Function.apply，保证所有的参数都可以接受得到，传送给那个模板方法：

Ext.ux.Subclass.superclass.onRender.apply(this, arguments);

要扩展哪个类

选择适合的类来扩展不但要考虑基类提供哪些功能，而且对性能方面也要着重考虑。无论有多少个UI控件被渲染或调控，Ext.Panel常常就是被衍生（extend）的对象。

Panel类拥有许多的能力：

    * Border（躯干）
    * Header（头部）
    * Header工具条
    * Footer（底部）
    * Footer按钮
    * Top toolbar（顶部工具条）
    * Bottom toolbar（底部工具条）
    * 承托和管理子组件

如果这些派不上用场，那使用Panel便是资源浪费。
Component（组件类）

如果要求的UI控件不需要其他的细节的控件，也就是，仅仅是封装某部分的HTML元素的话，那么可取的扩展对象就是Ext.BoxComponent或Ext.Component。如果再缩窄一步，我不需要听凭父容器提供的大小调控功能，那么使用Ext.Component就可以了。

强调： Component类并不会内省而得知哪一种元素作为holder。因此为了创建所需的元素（Element），应设定autoEl的配置项。

例如，要把一张图片封装为Component，我们于是乎这样定义：

Ext.ux.Image = Ext.extend(Ext.Component, {
    autoEl: {
        tag: 'img',
        src: Ext.BLANK_IMAGE_URL,
        cls: 'tng-managed-image'
    },

//  Add our custom processing to the onRender phase.
//  We add a ‘load’ listener to our element.
    onRender: function() {
        Ext.ux.Image.superclass.onRender.apply(this, arguments);
        this.el.on('load', this.onLoad, this);
    },

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

    setSrc: function(src) {
        this.el.dom.src = src;
    }
});

这是一个可封装图片的Ext Component类，可参与非箱子方寸模型（non box-sizing）的布局。
BoxComponent

如果要求的UI控件不需要其他的细节的控件，也就是，仅仅是封装某部分的HTML元素的话，还要听凭布局管理器提供的大小尺寸、布局的调控，那么这个的扩展对象就是Ext.BoxComponent。

例如，假设一个Logger类打算是简单地显示log信息，就必须嵌入某种布局的风格，例如插入到一个layout:’fit’窗体，可以这样定义：

Ext.ux.Logger = Ext.extend(Ext.BoxComponent, {
    tpl: new Ext.Template("<li class='x-log-entry x-log-{0:lowercase}-entry'>",
        "<div class='x-log-level'>",
            "{0:capitalize}",
        "</div>",
        "<span class='x-log-time'>",
            "{2:date('H:i:s.u')}",
        "</span>",
        "<span class='x-log-message'>",
            "{1}",
        "</span>",
    "</li>"),

    autoEl: {
        tag: 'ul',
        cls: 'x-logger'
    },

    onRender: function() {
        Ext.ux.Logger.superclass.onRender.apply(this, arguments);
        this.contextMenu = new Ext.menu.Menu({
            items: [new Ext.menu.CheckItem({
                id: 'debug',
                text: 'Debug',
                checkHandler: Ext.ux.Logger.prototype.onMenuCheck,
                scope: this
            }), new Ext.menu.CheckItem({
                id: 'info',
                text: 'Info',
                checkHandler: Ext.ux.Logger.prototype.onMenuCheck,
                scope: this
            }), new Ext.menu.CheckItem({
                id: 'warning',
                text: 'Warning',
                checkHandler: Ext.ux.Logger.prototype.onMenuCheck,
                scope: this
            }), new Ext.menu.CheckItem({
                id: 'error',
                text: 'Error',
                checkHandler: Ext.ux.Logger.prototype.onMenuCheck,
                scope: this
            })]
        });
        this.el.on('contextmenu', this.onContextMenu, this, {stopEvent: true});
    },

    onContextMenu: function(e) {
        this.contextMenu.logger = this;
        this.contextMenu.showAt(e.getXY());
    },

    onMenuCheck: function(checkItem, state) {
        var logger = checkItem.parentMenu.logger;
        var cls = 'x-log-show-' + checkItem.id;
        if (state) {
            logger.el.addClass(cls);
        } else {
            logger.el.removeClass(cls);
        }
    },

    debug: function(msg) {
        this.tpl.insertFirst(this.el, ['debug', msg, new Date()]);
        this.el.scrollTo("top", 0, true);
    },

    info: function(msg) {
        this.tpl.insertFirst(this.el, ['info', msg, new Date()]);
        this.el.scrollTo("top", 0, true);
    },

    warning: function(msg) {
        this.tpl.insertFirst(this.el, ['warning', msg, new Date()]);
        this.el.scrollTo("top", 0, true);
    },

    error: function(msg) {
        this.tpl.insertFirst(this.el, ['error', msg, new Date()]);
        this.el.scrollTo("top", 0, true);
    }
});

接着是CSS:

.x-logger {
    overflow: auto;
}
.x-log-entry .x-log-level {
    float: left;
    width: 4em;
    text-align: center;
    margin-right: 3px;
}
.x-log-entry .x-log-time {
    margin-right: 3px;
}
.x-log-entry .x-log-message {
    margin-right: 3px;
}
.x-log-debug-entry, .x-log-info-entry, .x-log-warning-entry, .x-log-error-entry {
    display: none;
}

.x-log-show-debug .x-log-debug-entry { display: block }
.x-log-show-info .x-log-info-entry { display: block }
.x-log-show-warning .x-log-warning-entry { display: block }
.x-log-show-error .x-log-error-entry { display: block }

.x-log-debug-entry .x-log-level { background-color: #46c }
.x-log-info-entry .x-log-level  { background-color: green }
.x-log-warning-entry .x-log-level  { background-color: yellow }
.x-log-error-entry .x-log-level  { background-color: red }

我们吧log的信息的HTML列表均放置在一个布局中。我们在onRender的阶段加入处理，使得右键菜单可以根据CSS样式类的名称操控logged条目的可见性。位于该层次的对象还提供了特别的模板方法：

    * onResize

    此时此刻，BoxComponent的大小已经发生变化，此时可执行剩余的任务。

    * onPosition

    此时此刻，BoxComponent的定位已经发生变化，此时可执行剩余的任务。

Container（容器类）

如果要求的UI控件将用于承载（Contain）其他UI元素在其身上，但并不需要前文提及到的Ext.Panel那么多的功能，为避免臃肿，应采用Ext.Container容器类来继承。同样地，autoEl指定元素的配置项亦必不可少，将用于容器在某个元素之上进行渲染。同样，在视觉控制方面，滚动条是否显示方面（即overflow属性），用户都可以使用Style配置项，或容器元素的class属性的两种方式进行CSS样式制定。

注意： 对于Container层次，不要忘记哪种布局类是被用于渲染和调控子组件的。

示例中的类封装了条件命令的查询，允许用户对Store基于测试字段的数据筛选。除了功能上的封装外，还把查询任务作统一布局，封装在一个可控类中，可方便从容器身上自动添加或移除查询的条目，灵活性更高：

Ext.ux.FilterCondition = Ext.extend(Ext.Container, {
    layout: 'table',

    layoutConfig: {
        columns: 7
    },

    autoEl: {
        cls: 'x-filter-condition'
    },

    Field: Ext.data.Record.create(['name', 'type']),

    initComponent: function() {
        this.fields = this.store.reader.recordType.prototype.fields;
        this.fieldStore = new Ext.data.Store();

//      Create a Store containing the field names and types
//      in the passed Store.
        this.fields.each(function(f) {
            this.fieldStore.add(new this.Field(f))
        }, this);

//      Create a Combo which allows selection of a field
        this.fieldCombo = new Ext.form.ComboBox({
            triggerAction: 'all',
            store: this.fieldStore,
            valueField: 'name',
            displayField: 'name',
            editable: false,
            forceSelection: true,
            mode: 'local',
            listeners: {
                select: this.onFieldSelect,
                scope: this
            }
        });

//      Create a Combo which allows selection of a test
        this.testCombo = new Ext.form.ComboBox({
            triggerAction: 'all',
            store: ['<', '<=', '=', '!=', '>=', '>']
        });

//      Inputs for each type of field. Hidden and shown as necessary
        this.booleanInput = new Ext.form.Checkbox({
            hideParent: true,
            hidden: true
        });
        this.intInput = new Ext.form.NumberField({
            allowDecimals: false,
            hideParent: true,
            hidden: true
        });
        this.floatInput = new Ext.form.NumberField({
            hideParent: true,
            hidden: true
        });
        this.textInput = new Ext.form.TextField({
            hideParent: true,
            hidden: true
        });
        this.dateInput = new Ext.form.DateField({
            hideParent: true,
            hidden: true
        });

        this.items = [ this.fieldCombo, this.testCombo, this.booleanInput, this.intInput, this.floatInput, this.textInput, this.dateInput];
        Ext.ux.FilterCondition.superclass.initComponent.apply(this, arguments);
    },

    onFieldSelect: function(combo, rec, index) {
        this.booleanInput.hide();
        this.intInput.hide();
        this.floatInput.hide();
        this.textInput.hide();
        this.dateInput.hide();
        var t = rec.get('type');
        if (t == 'boolean') {
            this.booleanInput.show();
            this.valueInput = this.booleanInput;
        } else if (t == 'int') {
            this.intInput.show();
            this.valueInput = this.intInput;
        } else if (t == 'float') {
            this.floatInput.show();
            this.valueInput = this.floatInput;
        } else if (t == 'date') {
            this.dateInput.show();
            this.valueInput = this.dateInput;
        } else {
            this.textInput.show();
            this.valueInput = this.textInput;
        }
    },

    getValue: function() {
        return {
            field: this.fieldCombo.getValue(),
            test: this.testCombo.getValue(),
            value: this.valueInput.getValue()
        };
    }
});

此类管理了其包含的输入字段，可以精确的布局－大小调整，外补丁等等——都是通过CSS样式分配到元素身上这样来起作用的。

位于该层次的对象还提供了特别的模板方法：

    * onBeforeAdd

    当添加新的子组件的时候，就会调用该方法。这时会有新组件作为参数传入，或者可修改它，或者以特别的方式准备好Container。返回false表示终止添加的操作。

Panel

如果所需的UI控件要求头部、底部、或工具条之类的元素，那么Ext.Panel就是一个很不错的类给予继承了。

注意： Panel是容器的一种，不要忘记哪种布局类是被用于渲染和调控子组件的。

通常Ext.Panel所实现的类会有很高的程序结合性，一般用于与其他UI控件协调使用（通常Containers，或表单字段），并对其有特定配置的布局风格。另外，要对在其内的组件提供操作的命令，可以从tbar（顶部工具栏），bbar（底部工具栏）的两方面设置加以控制。
Field

如果所需的UI控件要求为用户交互，可以把程序的数据显示给用户，或修改进而发生给服务器的功能，那么要被扩展的类应该是Ext.form.TextField，或Ext.Form.NumberField。另外，如果要求轮换按钮（Trigger button），以备键盘按键的轮换，那就是Ext.form.TriggerField。

位于该层次的对象还提供了特别的模板方法：

    * onFocus:input输入框得到焦点后即会触发该方法的执行。
    * onBlur:input输入框失去焦点后即会触发该方法的执行。

什么时候不需要子类

有些时候，滥用子类无异于“杀鸡用牛刀”。在一些特定应用场合，某个现有的类它的方法被添加、被重写，是由这个类的构造器实例化过程中依靠参数传入的。这时候模板方法依然可用但不能够用superclass的方式，去访问父类对象；这时，我们就要使用类自身的方式得到父类对象，调用模板方法，实质上它是通过构造器的原型的路径寻址（见this.constructor.prototype）。

例如我们要一次性地在一个实例中创建带有按钮的文本框以测试输入的web地址是否正确：

new Ext.form.TextField({
    name: 'associatedUrl',
    fieldLabel: 'Associated page',

//  Wrap the input, and render the test button
    onRender: function() {
        this.constructor.prototype.onRender.apply(this, arguments);
        this.wrap = this.el.wrap({
            cls: 'x-form-field-wrap'
        });
        this.testButton = new Ext.Button({
            renderTo: this.wrap,
            buttonSelector: 'em',
            cls: 'x-trigger-button',
            style: {
                position: 'absolute',
                right: 0,
                top: 0
            },
            text: 'Test',
            handler: this.testUrl,
            scope: this
        });
        if(!this.width){
            this.wrap.setWidth(this.el.getWidth() +
            this.testButton.getEl().getWidth() + 5);
        }
    },

//  Keep the wrap size correct
    onResize : function(w, h){
        this.constructor.prototype.onResize.call(this, w, h);
        if(typeof w == 'number'){
            this.el.setWidth(this.adjustWidth('input', w -
            (this.testButton.getEl().getWidth() + this.buttonSpacing)));
        }
        this.wrap.setWidth(this.el.getWidth() +
            this.testButton.getEl().getWidth() + this.buttonSpacing);
    },

//  Perform the test by opening the fields value as a web page
    testUrl: function(button, event) {
        if (this.isValid()) {
            var e = this.testButton.getEl();
            var w = window.open(this.getValue(), this.id.replace('-',''), 'status=true');
        }
    }
})

综述

    * 扩展现有的Ext组件类以便发挥可控生存周期的能力。
    * 从基础功能的类起实现扩展。
    * 用模板方法加入和重写行为。
    * 创建实例指定的模板方法，用在一次性的设计中。

转http://www.extjs.com/learn/Tutorial:Creating_new_UI_controls_%28Chinese%29