combobox in grid

[Moinsen]

Hi,

i am looking for a way to put a combobox in a grid. I could not find a working example.

This is my columns config for the grid:



[{header: 'Sprache', dataIndex: 'sprache', sortable : true, flex:1,
editor: { xtype:'combobox', displayField:'_name', valueField:'sprache', triggerAction:'all',mode:'local',
store: Ext.create('Ext.data.Store', {
fields: ['sprache', '_name'],
data : [
{"sprache":"de", "_name":"Deutsch"},
{"sprache":"en", "_name":"Englisch"},
{"sprache":"fr", "_name":"Französisch"},
{"sprache":"nl", "_name":"Niederländisch"},
{"sprache":"it", "_name":"Italienisch"},
{"sprache":"es", "_name":"Spanisch"},
{"sprache":"tr", "_name":"Türkisch"}
//...
]
})
}
}, {header: 'Name', dataIndex: 'name', sortable : true, flex:1}]);


But no combobox appears. Whats wrong with this or is there something missing. This is in 4.1.

Thanks

[Farish]

The combobox should appear when you start editing a row in your grid. Have you attached a rowediting plugin to your grid? Do you get any error messages in Firebug?

[sword-it]

Hi,

you can use following code:





Ext.onReady(function () {


var grid = Ext.create('Ext.grid.GridPanel', {
title: 'EditorGrid'
, selType: 'cellmodel'
, plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
]
, autoHeight: true
, store: new Ext.data.JsonStore({
data: {
item: [
{
name: 'xyz'
, sprache: 'Italienisch'
},
{
name: 'abc'
, sprache: 'Spanisch'
},
{
name: 'ttt'
, sprache: 'Deutsch'
}
]
}
, fields: ['name', 'sprache']
, proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'item'
}
}
})
, columns: [
{
header: "Name",
dataIndex: 'name',
editor: {
allowBlank: false
}
},
{
header: 'Sprache',
dataIndex: 'sprache',
editor:{
xtype:'combobox',
displayField:'_name',
valueField:'sprache',
triggerAction:'all',
mode:'local',
store: Ext.create('Ext.data.Store', {
fields: ['sprache', '_name'],
data : [
{"sprache":"de", "_name":"Deutsch"},
{"sprache":"en", "_name":"Englisch"},
{"sprache":"fr", "_name":"Französisch"},
{"sprache":"nl", "_name":"Niederländisch"},
{"sprache":"it", "_name":"Italienisch"},
{"sprache":"es", "_name":"Spanisch"},
{"sprache":"tr", "_name":"Türkisch"}
]
})
}
}
]
});
var win = new Ext.Window({
width: 800
, height: 400
, items: grid
, maximizable: true
, minimizable: true
})
win.show();
})



In Ext.js 4.1 you have to use these two config:




, selType: 'cellmodel' // it can be rowmodel
, plugins: [
Ext.create('Ext.grid.plugin.CellEditing', { // Ext.grid.plugin.RowEditing
clicksToEdit: 1
})
]



see this link: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-cfg-plugins

[Moinsen]

Hi,

thanks a lot to both of you it was the missing plugin!

Now i am looking for a way to see this combobox without editing this field. I think i have to do a renderer in the columns config for this field. How to do this?

Thanks again!