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

Question

我在 ext js 中定义了一个自定义表单字段。
自定义字段仅包含一个按钮（该按钮可以是一些文本或图像，等等）。
我要强行实现我的价值。所以我设置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.Fieldmixin。在文档中我们可以看到这个 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