View Full Version : Reconfigured grid with drop down columns and inline editing.

13 Feb 2013, 10:55 AM
Hi there,

I have a grid that is reconfigured depending on what the user is trying to view. This grid supports inline editing. On occasion, this grid will be reconfigured to hold a column that is a combo box and thus grab its data from a store.

The first issue I had with this scenario was that when I went to edit a row, the editable row's columns were not lined up with the actual columns. Okay, looked that up, fixed that issue. The next issue I had was that when the grid was reconfigured to hold a column with a combo box, trying to edit that would throw a store = null sort of error. I found a fix for that that suggested that I do the following to make it work properly:

//The grid, defined elsewhere but put here for simplicity
var grid = ...;

//Columns to reconfigure the grid to use
var columns = [
header: 'Company',
dataIndex: 'company',
editor: {
xtype: 'combo',
store: 'CompaniesStore',
queryMode: 'local',
displayField: 'company',
valueField: 'companyId',
allowBlank: false,
forceSelection: true

var store = this.getContractsStoreStore(); //The store for the grid to grab the Company data from

//Reconfigure the grid
//The old way (when I was getting the store = null error) was: grid.reconfigure(store, columns);
var updatedColumn = new Ext.grid.column.Column({columns: columns});
grid.reconfigure(store, updatedColumn); //The new way that allows me to view/change the combo

This works but, because of the "updatedColumn" being what it is, makes a new column header that is blank and puts the rest of the columns under this (grouped). Is there anyway to get rid of this blank and annoying header or a different method entirely? Thanks!

13 Feb 2013, 11:58 AM
You could use the beforeedit listener and use
column.setEditor( {xtype: 'textfield' } );

As long as your data matches you combo store data, you should be fine.