如何创建自定义 ExtJS 表单字段组件? [英] How to create custom ExtJS form field component?

问题描述

我想使用其中的其他 ExtJS 组件(例如 TreePanel)创建自定义 ExtJS 表单字段 组件.我怎样才能最轻松地做到这一点?

I want to create custom ExtJS form field components using other ExtJS components in it (e.g. TreePanel). How can I do it most easily?

我已经阅读了 的文档Ext.form.field.Base 但我不想通过 fieldSubTpl 定义字段主体.我只想编写创建 ExtJS 组件的代码，也许还有其他一些获取和设置值的代码.

I've read docs of Ext.form.field.Base but I don't want to define field body by fieldSubTpl. I just want to write code which creates ExtJS components and maybe some other code which gets and sets values.

更新:总结如下:

• 这个新组件应该适合表单 GUI 作为一个字段.它应该有标签和相同的对齐方式(标签，锚点)其他领域，无需进一步的黑客攻击.

• This new component should fit in the form GUI as a field. It should have label and the same alignment (label, anchor) of other fields without need of further hacking.

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

Possibly, I have to write some getValue, setValue logic. I'd rather embed it into this component than making separated code which copies things into further hidden form fields that I also have to manage.

推荐答案

为了扩展 @RobAgar 的答案，遵循我为 ExtJS 3 编写的一个非常简单的日期时间字段，它是我为 ExtJS 4 制作的快速端口.重要的事情是使用 Ext.form.field.Field 混入.这个mixin为表单域的逻辑行为和状态提供了一个通用接口，包括:

To extend @RobAgar 's answer, following a really simple Date Time field that I wrote for ExtJS 3 and it's quickport that I made for ExtJS 4. The important thing is the use of the Ext.form.field.Field mixin. This mixin provides a common interface for the logical behavior and state of form fields, including:

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

Getter and setter methods for field values Events and methods for tracking value and validity changes Methods for triggering validation

这可用于组合多个字段并将它们作为一个.对于完全自定义的字段类型，我建议扩展 <代码>Ext.form.field.Base

This can be used for combining multiple fields and let act them as one. For a total custom fieldtype I recommend to extend Ext.form.field.Base

这是我上面提到的例子.即使对于像我们需要在 getter 和 setter 中格式化数据的日期对象，这应该是多么容易做到这一点.

Here is the example that I mentioned above. It should shoe how easy this can be done even for something like a date object where we need to format the data within the getter and 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)
    }
});

这篇关于如何创建自定义 ExtJS 表单字段组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！