Renderer component column grid in Sencha ExtJs 5.1.0 - extjs

Question

I has problem about renderer, I use renderer to create numberfield in column of grid, but it doesn't work, please see code and help me where I wrong.
xtype:'gridcolumn',
header: 'Quantity',
dataIndex: 'qty',
hideable: false,
sortable : true,
renderer:function(value) {
var id = Ext.id();
var numberField = Ext.create('Ext.form.field.Number', {
height:100,
});
return '<div id="' + id + '"></div>';
}
Thanks for your help.

Answer 1

I think you should be looking at the Cell Editing plugin. In the code above you are creating an instance of a number field but not actually applying it to anything.
The cell editing plugin allows you to use field components such as text field, number field etc in a column and helps manage edited data.
Fiddle
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224',
number: 0
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234',
num: 1
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244',
num: 2
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254',
num: 3
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
header: 'Number',
dataIndex: 'num',
editor: 'numberfield'
}],
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
}
});