Insert Ext component into grid cell

[LuckyBlade]

Hello! I wanna insert Ext component, such as button or text field into grid cell. Here is simple part of code:
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', 'test'],
data: { 'items': [
{'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" },
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var id = Ext.id();
var testGrid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
autoRender: true,
columns: [ {
flex: 1,
text: "test",
renderer: function (value, meta, record) {
return "<div id=" + id + "></div>";
},
dataIndex: "test"
},
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email' },
{ header: 'Phone', dataIndex: 'phone' }
]
});
var textfield = new Ext.create("Ext.form.TextField", {
renderTo: id
});
testGrid.show();
It's not working. Error : Uncaught TypeError: Cannot read property 'insertAdjacentHTML' of null. What am I doing wrong? This idea from http://www.rahulsingla.com/blog/2011...ns#comment-853

[scottmartin]

Have a look at:
http://www.sencha.com/forum/showthre...-in-Grid-Cells
http://skirtlesden.com/ux/component-column

Regards,
Scott.