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

Question

我在ext js中定义了一个自定义表单域。
自定义字段只包含一个按钮(此按钮可以是一些文本或图像事件)。
我想强制我的值(value)。所以我将 getValue 设置为返回一些字符串。
该方法未被调用。
我希望发生两件事。
1. getValue 将是将在提交中发送的值。
2. setValue 将给我 form.load(...) 加载的数据，我将按我的方式处理...

这里有一个例子，点击提交你会看到getValue没有被调用。 http://jsfiddle.net/RB9Hp/

或者这个更真实的生活用例:http://jsfiddle.net/FTV3R/ <- 这不会从 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 为表单字段的逻辑行为和状态提供了一个通用接口(interface)，包括:

• 字段值的 getter 和 setter 方法
• 跟踪值(value)和有效性变化的事件和方法
• 触发验证的方法

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

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