Extjs defining custom field with getValue and setValue

Question

I have defined a custom form field in ext js.
The custom field just contain a button (this button can be event some text or image, whatever).
I want to force my value. so I set the getValue to return some string.
The method is not invoked.
I want 2 things to happened.
1. getValue will be the value that will be sent in the submit.
2. setValue will give me the data that form.load(...) has loaded, and I will handle it my way...

here is an example, click on the submit and you'll see that getValue is not bee called. http://jsfiddle.net/RB9Hp/

or this more real life use-case : http://jsfiddle.net/FTV3R/ <- this will not send the value from 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 is just container for form field components. If you need that your component will behave like form field it should use Ext.form.field.Field mixin. In documentation we can read that this mixin provides a common interface for the logical behavior and state of form fields, including:

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

In your test case you also should change getValue to getSubmitValue because this method is used by form when it is collecting data from form fields after you call form's submit() method.

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();
    }
});

Fiddle with example: https://fiddle.sencha.com/#fiddle/2vp