I have a Ext.grid.Panel
with a set of columns. This grid is filtered, and depending on the filter I would like to define an editor for a column.
My grid:
Ext.define('Mb.view.MyPanel', {
extend: 'Ext.grid.Panel',
columns: [
{text: 'Order #', dataIndex: 'id'},
{text: 'Action', dataIndex: 'type',
renderer: function(value){
if(value == 'BP') return Lang._('Veuillez choisir')
return ''
}
},
Now I would like to do something like:
var panel = Mb.app.getView('MyPanel');
if (condition == true) {
panel.getColumns[1].setEditor({
xtype: 'textfield',
...
})
}
Obviously the methods getColumns
and setEditor
do not exist. I therefore need another method to activate an editor on that column.
I didn't find a method to access the column definitions to modifiy them and to rerender the grid afterwards.
Can you give me a hint in which direction to search ? Thanks.
Check out the docs for getEditor()
on Ext.grid.column.Column
. If you are using an Editing plugin, the plugin provides implementation for getEditor()
, as well as setEditor()
. Based on column being edited and any custom logic you implement, you could implement a custom getEditor()
method to return whatever editor instance you want based on the circumstances.
The documentation says:
getEditor( record, defaultField ) : Ext.form.field.Field
This really tells a small part of the truth.
getEditor
is not only a method of Ext.grid.column.Column
, but also a config option.getEditor
is defined as config option function get's called as getEditor( record )
and needs to return a Ext.grid.CellEditor
.Here is an example of a column configuration. It will create a combobox only on selected rows :
columns: [{
text: 'Action', dataIndex: 'action',
getEditor: function(record){
if( my logic ){
return Ext.create('Ext.grid.CellEditor', {
field: Ext.create( 'Ext.form.field.ComboBox', {
forceSelection: true,
store: [[1, 'Option 1'], [2, 'Option 2']]
})
})
} else return false;
}
},