container control as a grid editor does not update values - extjs

Question

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)
Check the screenie:
Here is a link to a screenie:
The Problem:
When I click update to update the row. The first column gets updated, but the second column doesn't
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 :
Is there something I'm missing?
Should I inherit from FieldBase? Can I use multiple controls and create something like the screenie with FieldBase?

Answer 1

This works, even your getValue() was working, the problem is that you used a custom type value on that grid column (IssueCondition) and did not specified any renderer for it, try something like this:
Ext.define('MainGrid', {
extend: 'Ext.grid.Panel',
height: 300,
plugins: [Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 1
})],
columns: [{
xtype: 'rownumberer'
}, {
xtype: 'gridcolumn',
text: 'Column Titles',
dataIndex: 'ColumnTitle',
editor: {
xtype: 'textfield'
}
}, {
xtype: 'gridcolumn',
sortable: false,
text: "Issue Condition",
align: 'center',
dataIndex: 'IssueCondition',
width: 200,
editor: {
xtype: 'reportpopulation'
},
renderer: function (v, attr, rec) {
console.info(arguments);
return 'cb: ' + rec.data.IssueCondition.cb + ' combo: ' + rec.data.IssueCondition.combo;
}
}],
store: Ext.create("Ext.data.Store", {
fields: ["ColumnTitle", "IssueCondition"],
proxy: {
type: "memory",
reader: {
type: "json"
}
}
})
});
Ext.define('SelectPopulation', {
extend: 'Ext.container.Container',
itemId: 'ctrSelectpopulation',
alias: 'widget.reportpopulation',
layout: {
type: 'hbox'
},
initComponent: function () {
Ext.apply(this, {
items: [{
xtype: "checkbox"
}, {
xtype: "combobox",
allowBlank: false,
store: [
[0, 'Zero'],
[1, 'One'],
[2, 'Two']
]
}]
});
this.callParent(arguments);
},
getValue: function () {
return {
cb: this.child('checkbox').getValue(),
combo: this.child('combobox').getValue()
};
}
});
Be aware that this is just an example.
Check the Fiddle here
Hope this helps.