如何创建自定义 ExtJS 表单字段组件？

我想创建自定义 ExtJS表单域组件中使用其他 ExtJS 组件（例如 TreePanel）。我怎样才能最轻松地做到这一点？

我读过的文档扩展表单字段基础 http://docs.sencha.com/ext-js/4-0/#/api/Ext.form.field.Base但我不想通过以下方式定义字段主体fieldSubTpl。我只想编写创建 ExtJS 组件的代码以及一些获取和设置值的其他代码。

Update:概括的目的如下：

• 这个新组件应该适合 将 GUI 形成为字段。它应该有 标签和相同的对齐方式（标签， 不需要其他领域的anchor） 进一步的黑客攻击。

• 可能，我有 写一些getValue、setValue 逻辑。我宁愿将其嵌入到这个组件中，而不是制作单独的代码，将内容复制到我还必须管理的进一步隐藏的表单字段中。

为了扩展 @RobAgar 的答案，遵循我为 ExtJS 3 编写的一个非常简单的日期时间字段，它是我为 ExtJS 4 编写的快速端口。重要的是使用Ext.form.field.Field http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.Field混合。该 mixin 为表单字段的逻辑行为和状态提供了一个通用接口，包括：

字段值的 getter 和 setter 方法 用于跟踪价值和有效性变化的事件和方法 触发验证的方法

这可用于组合多个字段并将它们作为一个字段。对于完全自定义字段类型，我建议扩展Ext.form.field.Base http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.Base

这是我上面提到的例子。即使对于像日期对象这样的对象，我们需要在 getter 和 setter 中格式化数据，它也应该能够轻松地完成此操作。

Ext.define('QWA.form.field.DateTime', {
    extend: 'Ext.form.FieldContainer',
    mixins: {
        field: 'Ext.form.field.Field'
    },
    alias: 'widget.datetimefield',
    layout: 'hbox',
    width: 200,
    height: 22,
    combineErrors: true,
    msgTarget: 'side',
    submitFormat: 'c',

    dateCfg: null,
    timeCfg: null,

    initComponent: function () {
        var me = this;
        if (!me.dateCfg) me.dateCfg = {};
        if (!me.timeCfg) me.timeCfg = {};
        me.buildField();
        me.callParent();
        me.dateField = me.down('datefield')
        me.timeField = me.down('timefield')

        me.initField();
    },

    //@private
    buildField: function () {
        var me = this;
        me.items = [
        Ext.apply({
            xtype: 'datefield',
            submitValue: false,
            format: 'd.m.Y',
            width: 100,
            flex: 2
        }, me.dateCfg),
        Ext.apply({
            xtype: 'timefield',
            submitValue: false,
            format: 'H:i',
            width: 80,
            flex: 1
        }, me.timeCfg)]
    },

    getValue: function () {
        var me = this,
            value,
            date = me.dateField.getSubmitValue(),
            dateFormat = me.dateField.format,
            time = me.timeField.getSubmitValue(),
            timeFormat = me.timeField.format;
        if (date) {
            if (time) {
                value = Ext.Date.parse(date + ' ' + time, me.getFormat());
            } else {
                value = me.dateField.getValue();
            }
        }
        return value;
    },

    setValue: function (value) {
        var me = this;
        me.dateField.setValue(value);
        me.timeField.setValue(value);
    },

    getSubmitData: function () {
        var me = this,
            data = null;
        if (!me.disabled && me.submitValue && !me.isFileUpload()) {
            data = {},
            value = me.getValue(),
            data[me.getName()] = '' + value ? Ext.Date.format(value, me.submitFormat) : null;
        }
        return data;
    },

    getFormat: function () {
        var me = this;
        return (me.dateField.submitFormat || me.dateField.format) + " " + (me.timeField.submitFormat || me.timeField.format)
    }
});