textfield or textarea with in rowbodytpl of extjs grid (rowexpander) - extjs

Question

How can I create textfield or textarea with in rowbodytpl of extjs grid (rowexpander). Also my program needs to read these fields and update the DB. I would love to know the use of radiogroup within rowbodytpl

Answer 1

I guess the best way is to implement plugin which can render any component into rowbody. Then you can just pass any component config to it.
Example plugin:
Ext.define('Ext.ux.grid.SubCmp', {
extend: 'Ext.grid.plugin.RowExpander',
alias: 'plugin.subcmp',
rowBodyTpl: ['{%this.owner.renderComponent(out, values);%}'],
// override this method and return component config
componentConfigFn: function(record) { return {}; },
init: function(grid) {
var me = this,
store = grid.getStore(),
view = grid.getView();
me.components = {};
me.callParent(arguments);
// when grid is reloaded we should destroy all created components
grid.on('beforedestroy', me.destroyComponents, me);
store.on('beforeload', me.destroyComponents, me);
// renders component
view.on('expandbody', me.onExpandBody, me);
// modify getRefItems method of grid to allow querying components from rowbody
grid.getRefItems = (function() {
var originalFn = grid.getRefItems;
return function(deep) {
var result = originalFn.call(grid, deep);
if (deep) {
for (var i in me.components) {
result.push(me.components[i]);
result.push.apply(result, me.components[i].getRefItems(true));
}
}
return result;
}
}());
},
destroyComponents: function() {
var me = this,
components = me.components;
for (var i in components) {
components[i].destroy();
}
me.components = {};
},
onExpandBody: function(rowNode, record, expandRow, eOpts) {
var me = this,
grid = me.grid,
recordId = record.id,
componentWrapId = grid.id + '-component-wrap-' + recordId,
component = me.components[recordId];
if (component && !component.rendered) {
component.render(componentWrapId);
}
},
renderComponent: function (out, rowValues) {
var me = this,
grid = me.grid,
store = grid.getStore(),
recordId = rowValues.id,
record = store.getById(recordId),
componentWrapId = grid.id + '-component-wrap-' + recordId,
componentId = grid.id + '-component-' + recordId,
component,
config;
if (me.components[recordId]) {
return; // already rendered
}
config = Ext.apply({}, { id: componentId }, me.componentConfigFn(record));
me.components[recordId] = component = Ext.create(config);
out.push('<div id="' + componentWrapId + '"></div>');
}
});
To select components from rowbody, you can use grid.query method.
Fiddle: http://jsfiddle.net/znnqxmyq/9/