extjs 4 How too keep combobox in grid cell - extjs

Question

I've seen similar questions go unanswered elsewhere. I want to have a combobox in a column with two options (ASC, DEC) in it. I want it to show up in each row, or at least have its value show up when it's not selected.
I know that its not a 'good idea' to render a combobox in each row, but in this case I know I will have a maximum of about 20 rows, so it shouldn't be a huge deal. If this can't be done I want to have the selected value from the combobox show. Currently I just have the comboboxes appearing when I click a row, which doesn't make much sense since you can't see your selection unless you are making it. What is the solution to this?
Also, I want to get rid of the change and cancel buttons that pop up when I click a row, I just want to be able to edit the cell with the combobox, and have it automatically change/save.

Answer 1

You can set a default value for the combo.
That should then get that rendered at startup.
Use cell renderer to render the displayField of the combo into your grid. Following a working example that can be poster in one of the API code boxes.
Working JSFiddle
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', 'id'],
data: {
'items': [{
"name": "Lisa",
"email": "lisa#simpsons.com",
"phone": "555-111-1224",
"id": 0
}, {
"name": "Bart",
"email": "bart#simpsons.com",
"phone": "555-222-1234",
"id": 1
}, {
"name": "Homer",
"email": "home#simpsons.com",
"phone": "555-222-1244",
"id": 2
}, {
"name": "Marge",
"email": "marge#simpsons.com",
"phone": "555-222-1254",
"id": 3
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
// the renderer. You should define it within a namespace
var comboBoxRenderer = function(combo) {
return function(value) {
var idx = combo.store.find(combo.valueField, value);
var rec = combo.store.getAt(idx);
return (rec === null ? '' : rec.get(combo.displayField));
};
}
// the combo store
var store = new Ext.data.SimpleStore({
fields: ["value", "text"],
data: [
[1, "Option 1"],
[2, "Option 2"]
]
});
// the edit combo
var combo = new Ext.form.ComboBox({
store: store,
valueField: "value",
displayField: "text"
});
// demogrid
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: 'id',
dataIndex: 'id',
editor: combo,
renderer: comboBoxRenderer(combo)
}],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
height: 200,
width: 400,
renderTo: Ext.getBody()
});

Answer 2

{
header: 'Your header',
dataIndex: 'your Column',
editor: {
xtype: 'combobox',
store: yourStore,
queryMode: 'local',
displayField: 'Your Display..',
valueField: 'Your Value'
}