Question

我在ext js中定义了一个自定义表单字段自定义字段只包含一个按钮（此按钮可以是某些文本或图像的事件，无论如何）我想强迫自己的价值。所以我设置getValue以返回一些字符串不调用该方法我想要发生两件事 1. getValue将是将在提交中发送的值 2. setValue会向我提供form.load(...)已加载的数据，我将按照我的方式处理...

这是一个示例，单击提交，您将看到getValue未被调用。 http://jsfiddle.net/RB9Hp/

或更真实的用例：http://jsfiddle.net/FTV3R/＆lt; - 这不会从getValue发送值

Ext.define('Ext.form.CustomField', {
    extend: 'Ext.form.FieldContainer',
    alias: 'widget.customfield',

    width: 300,
    constructor: function(config) {
        this.callParent([config]);
    },
    getValue : function(){
        console.log("getValue");
        return "test"; // I want to force new value.
    },
    setValue : function(val){},
    initComponent: function() {
        this.items = ([{'xtype' : 'button',text : 'some button'}]);
        this.callParent();
    }
});

Answer 1

Ext.form.FieldContainer只是表单字段组件的容器。如果您需要组件的行为类似于表单字段，则应使用Ext.form.field.Field mixin。在文档中，我们可以读到这个mixin为表单字段的逻辑行为和状态提供了一个通用接口，包括：

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

在您的测试用例中，您还应将getValue更改为getSubmitValue，因为在您调用表单submit()方法后从表单字段中收集数据时，表单会使用此方法。

Ext.define('Ext.form.CustomField', {
    extend: 'Ext.form.FieldContainer',
    alias: 'widget.customfield',
    mixins: {
        field: 'Ext.form.field.Field'
    },    

    width: 300,
    constructor: function(config) {
        this.callParent([config]);
    },
    getValue : function(){

        return "test"; // I want to force new value.
    },
    getSubmitValue: function() {
         return "test";
    },    
    setValue : function(val){},
    initComponent: function() {
        this.items = ([{'xtype' : 'button',text : 'some button'}]);
        this.callParent();
    }
});

举例说明： https://fiddle.sencha.com/#fiddle/2vp

使用getValue和setValue定义自定义字段的Extjs

1 个答案: