Ext.js5文本域的自我复制（fieldreplicator插件）（31）

/**
 * This example illustrates the use of plugins to alter the default behaviour of Components.
 * The <b>Send To</b> field clones itself until the final one is left blank to allow
 * multiple mail recipients. The layout manager keeps the vertical space allocated correctly.
 * 这个例子使用了插件去修改组件的默认行为。Send To 文本域会复制本身，直到最后一个为空白的，这样可以填写多个邮件接收者（不过这个设计真是汗颜。。。。）。布局管理器保持垂直空间正确分配。
 */
Ext.define('KitchenSink.view.form.FieldReplicator', {
    extend: 'Ext.form.Panel',
    xtype: 'form-fieldreplicator',


    title: 'Compose message',
    width: 400,
    frame: true,
    bodyPadding: 5,
    resizable: true,
    minHeight: 200,

    fieldDefaults: {
        labelWidth: 70,
        anchor: '100%'
    },

    layout: {
        type: 'vbox',
        align: 'stretch'  // Child items are stretched to full width
    },

    items: [{
        xtype: 'container',
        scrollable: true,
        maxHeight: 100,
        layout: 'anchor',
        items: [{
            xtype: 'combo',
            store: {
                type: 'array',
                fields: [ 'email' ],
                data: [
                    ['test@example.com'],
                    ['someone@example.com'],
                    ['someone-else@example.com']
                ]
            },
            displayField: 'email',
            plugins: 'fieldreplicator',
            fieldLabel: 'Send To',
            anchor: '0',
            queryMode: 'local',
            //是否Tab键可以选择当前突出项。
            selectOnTab: false,
            name: 'to',
            onReplicate: function () {
                this.getStore().clearFilter();
            }
        }]
    }, {
        xtype: 'textfield',
        fieldLabel: 'Subject',
        name: 'subject'
    }, {
        xtype: 'textarea',
        fieldLabel: 'Message text',
        emptyText: 'Message goes here',
        hideLabel: true,
        name: 'msg',
        flex: 1  // Take up all *remaining* vertical space (kicks in when resized)
    }]
});