container control as a grid editor does not update values

[pradeep29121]

So I have a grid with two columns, the first has just text, the second
needs to have a custom control (with a checkbox and a combo box)


When I click update to update the row. The first column gets updated,
but the second column doesn't

This is how it looks:

grid.PNG

I naively added a getValue() into my custom control but no luck!! (Note: I'm using row editing plugin)


Here is my code,

    Ext.define('MainGrid', {
        extend: 'Ext.grid.Panel',
        //defs for all the toolbars and buttons
        plugins: [rowEditing],
        columns: [
                    {
                        xtype: 'rownumberer'
                    },
                    {
                        xtype: 'gridcolumn',
                        text: 'Column Titles',
                        dataIndex: 'ColumnTitle',
                        editor: {
                            xtype: 'textfield',
                        }
                    },
                    {
                        xtype: 'gridcolumn',
                        sortable: false,
                        align: 'center',
                        dataIndex: 'IssueCondition',
                        editor: {
                            xtype: 'reportpopulation'
                        }]
    });

The reportpopulation is the custom control here. Here is the code for
it:

    Ext.define('SelectPopulation', {
        extend: 'Ext.container.Container',
        itemId: 'ctrSelectpopulation',
        alias: 'widget.reportpopulation',
        layout: {
            type: 'hbox'
        },
        initComponent: function () {
          //code to add combo box and checkbox snipped
          ....
        },
        getValue: function () {
            //This doesn't work! 
            return "Booo";
        }
    });

So clicking Update doesn't :

1.. Is there something I'm missing?
2.. Should I inherit from FieldBase?

[mitchellsimoens]

To make something a form you need to do different things. Here is an example:

Ext.define('MyField', {
    extend : 'Ext.container.Container',
    xtype  : 'myfield',

    isFormField : true,
    name        : null,
    value       : null,

    constructor : function(config) {
        config = config || {};

        if (config.value) {
            this.html = config.value;
        } else if (this.value) {
            this.html = this.value;
        }

        this.callParent([config]);
    },

    setValue : function (value) {
        this.value = this.html = value;
    },

    getValue : function() {
        return this.value;
    },

    getName : function() {
        return this.name;
    },

    getSubmitData : function() {
        var data = {};

        data[this.getName()] = this.getValue();

        return data;
    },

    isValid : function() {
        return true;
    },

    validate : function() {
        return this.isValid();
    },

    isFileUpload : function() {
        return false;
    }
});

new Ext.form.Panel({
    renderTo : document.body,
    url      : 'data/form.php',
    items    : [
        {
            xtype      : 'textfield',
            fieldLabel : 'Text',
            name       : 'text',
            value      : 'foo'
        },
        {
            xtype : 'myfield',
            name  : 'test',
            value : 'bar'
        },
        {
            xtype   : 'button',
            text    : 'Get Values',
            handler : function (btn) {
                var form = btn.up('form');

                console.log(
                    form.getValues()
                );
            }
        },
        {
            xtype   : 'button',
            text    : 'Submit',
            handler : function (btn) {
                var form = btn.up('form');

                form.submit();
            }
        }
    ]
});