如何创建自定义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作为字段。它应该有
  标签和其他字段的相同对齐方式（label，
  anchor），而不需要
  进一步的黑客。

• 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编写的一个非常简单的Date Time字段，它是为ExtJS 4制作的quickport。重要的是使用 Ext.form.field.Field mixin。这个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屋！