combobox as gridcolumn in ExtJs 4.2. Which one is better and more importantly right way to do

Question

I have a requirement where a column has to be a combobox inside a grid.

1 st way inside items--

items :[{width : 500,
        margin : '5 5 5 5',
        xtype : 'gridpanel',
        store :'some_store_name',
        sortableColumns : false,
        selType : 'cellmodel',
        plugins : [ {
                ptype : 'cellediting',
            clicksToEdit : 1
            } ],
        columns : [ {
                text : '<b>Column_one</b>',
                dataIndex : 'index_one',
                flex : 1
                },
                       {text : '<b>choose a value</b>',
                dataIndex : 'index_two',
                flex : 1,
                editor : {
                    xtype : 'combobox',
                    store : 'some_store_name',
                    queryMode : 'local',
                    displayField : 'label',
                    valueField : 'label'
                    }}]}]

This works in the right manner. The only problem is, the user has to click on the grid to to know that its a combo box. Should I use CSS and set a property saying that this particular column inside the grid should apper like a combo? Is there any other way?

2 nd way Instead of using the plugin editor, we can use a renderer function and return a xtype of combobox which is popullated by a store. If I have 3 columns inside a grid and the requirement says that this combo should be in the second column, then there is a bug. When I click on the combo ,select a value and move on to the third column to change a text or enter / edit the column which is of type (text box or some component), the combobox value disappears. Why is it so?

     { dataIndex : 'values', text : '<b>Status</b>',   xtype : 'componentcolumn',
  flex : 2,renderer : function(value) {return { name : 'some_name',store : 'some_store',    value : value,xtype : 'combobox',displayField : 'y',valueField : 'x',   queryMode : 'local'};}}}

Any suggestions are welcomed. thank you !

Answer 1

Using the first way is correct. If you want the column to also appear that it is editable, please see my answer to this SO question: How to show complete column as editable in extjs grid(cell editing)?

The reason why the second approach is not working is that the combobox is not in anyway tied to the record data that it should be updating. On initial render you are setting the default value of the box with records value through the renderer, but when someone goes to edit that value, there is nothing to say: "Hey update the record with this value also." Since there is no defined binding between the record and combobox, the combobox doesn't actually tell the record the new value, and therefore when the grid goes to display the value from the record again, there is no updated value to display.