PDA

View Full Version : How to change grid column editor dynamically



nader_one
4 May 2012, 4:09 AM
Hi All

is it possible to change the grid column editor because i have 2 cases, the first with a combobox and the another with a textfield ?

Thanks for help

mitchellsimoens
7 May 2012, 6:57 AM
So different rows can have different editors but the column is the same?

nader_one
7 May 2012, 10:16 AM
l'm sorry, it wasn't clear,,,
thank you for the answer

mitchellsimoens
7 May 2012, 12:33 PM
thanks so match,

I'm sorry. I don't understand

droessner
8 May 2012, 4:29 AM
If you are saying that you need to specify a different column editor for a column based on a value in the record, you can specify a getEditor function on that column and return the editor that you want to use for each case. See http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-method-getEditor

nader_one
14 May 2012, 6:11 AM
thank you to answer, the problem that i don't know how to use getEditor, i tried to make some code, this is my code :
getEditor: function(rec,defaut){
if(rec.get('isCombo')==false){
defaut=Ext.create('Ext.form.field.Field',{
xtype: 'textfield'
});
}
}

it was just to check it, but when i do this, RowEditing doesn't work anymore !!!

droessner
14 May 2012, 8:52 AM
The getEditor function should return a CellEditor. Try something like this:



getEditor: function(record) {
return Ext.create('Ext.grid.CellEditor', {
field: Ext.create('Ext.form.field.Text', {
allowBlank: false
})
});
}

nader_one
14 May 2012, 10:55 PM
Thank you for the answer droessner (http://www.sencha.com/forum/member.php?245948-droessner) , i tried this one (your code), but when i clic to edit the column disappears as if i did column.setVisible(true), i don't know that happen !!!! , have u any idea droessner (http://www.sencha.com/forum/member.php?245948-droessner) please !!!!?

droessner
15 May 2012, 9:01 AM
Here's an example:


<!DOCTYPE html><html>
<head>
<title>Exporter Example</title>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var combo = Ext.create('Ext.form.field.ComboBox', {
store: [[ '1', 'Value 1' ], ['2', 'Value 2' ]]
});


Ext.create('Ext.grid.Panel', {
title: 'Test Grid',
height: 300,
width: 500,
renderTo: Ext.getBody(),
store: Ext.create('Ext.data.Store', {
fields: ['name', 'editType', 'editValue'],
proxy: {
type: 'memory'
},
data: [
{name: 'test1', editType: 'text', editValue: 'value'},
{name: 'test2', editType: 'combo', editValue: '1'},
{name: 'test3', editType: 'text', editValue: 'text'}
]
}),
columns: [{
header: 'Name',
dataIndex: 'name',
flex: 1
}, {
header: 'Editor',
dataIndex: 'editValue',
width: 200,
renderer: function(value, metaData, record) {
var comboRecord;


if (record.get('editType') === 'combo') {
comboRecord = combo.findRecord(combo.valueField, value);
value = comboRecord ? comboRecord.get(combo.displayField) : combo.valueNotFoundText;
}
return value;
},
getEditor: function(record) {
var type = record.get('editType');


if (type === 'text') {
return Ext.create('Ext.grid.CellEditor', {
field: Ext.create('Ext.form.field.Text')
});
} else if (type === 'combo') {
return Ext.create('Ext.grid.CellEditor', {
field: combo
});
}
}
}],
plugins: [{
ptype: 'cellediting',
clicksToEdit: 1
}]
});
});
</script>
</head>
<body>
</body>
</html>

nader_one
15 May 2012, 9:25 AM
thank you , but i'm using RowEditing to edit the grid rows ,does that make any difference ..?

droessner
15 May 2012, 10:00 AM
Sorry, I've never had to do something like this using a row editor.

nader_one
15 May 2012, 12:24 PM
so there is no solution for row editor ??

Sabareesh
5 Mar 2013, 1:06 AM
Hi droessner

I was trying to implement the different editors for different rows in extjs 4.0.x , everything is working fine , but the combo box editor works only for the first time .

Any suggestions on why it is not working ?


Thanks
Sabareesh

mrpale
2 Sep 2013, 11:36 PM
Any updates on the matter?

I'm getting the same problem @Sabareesh (http://www.sencha.com/forum/member.php?308840-Sabareesh) is getting! the getEditor method gets called for the first time only, after that the editor remains the same no matter what row is being edited!

pscanlon1
11 Oct 2013, 9:03 AM
call setEditor inside get editor with the xtype you want to use for that specific cell.


getEditor:function(record,defaultField){
var format=record.get('metadata');
if(format&&format.updatable){
if(Ext.Array.contains(format.formats,'percent'))
{
this.setEditor({xtype:'percentageEditor'});
Ext.log({msg:'Returning Percentage Editor for field',dump:defaultField});
return Ext.widget('percentageEditor');//xtype: 'percentageEditor'

}else{
Ext.log({msg:'Returning Number Editor for field',dump:defaultField});
this.setEditor({xtype:'numberfield'});
return Ext.widget('numberfield');
//xtype: 'numberfield'

}
}else{
return false;
}
}



my metadata looked like the following


metadata:{
formats:['percent'],
updatable:true
}

predator
18 Mar 2014, 5:32 AM
You may take different approach I think.



Ext.create('Ext.grid.plugin.RowEditing', {
pluginId: 'rowEditorPlugin',
clicksToEdit: 1,
listeners: {
beforeedit: function(editor, e, eOpts) {
if(e.field == 'tricky_column') {
me.setCustomEditor(e.record, e.column)
}
}
}
}

})
],


Handle it in something like this:


setCustomEditor: function(record, column) {
var me = this;

//if(record.get('abc') === 'something') .... and so on

column.setEditor({
xtype: 'combobox',
valueField: 'id',
displayField: 'value',
queryMode: 'local',
store: me.customStore
});

},


Not sure if it is going to work out of the box, because beforeedit I think is fired only once at the beginning and will capture the column that is being clicked, so you would have to alter this code in a way that does not rely on that but instead point it to the right column manually.

Pass e.grid instead of e.column to setCustomEditor and try something like so:


Ext.create('Ext.grid.plugin.RowEditing', {
pluginId: 'rowEditorPlugin',
clicksToEdit: 1,
listeners: {
beforeedit: function(editor, e, eOpts) {
me.setCustomEditor(e.record, e.grid)
}
}
}

})
],
//....
setCustomEditor: function(record, grid) {
var me = this,
column = grid.down('[dataIndex=tricky_column]');

//if(record.get('abc') === 'something') .... and so on

column.setEditor({
xtype: 'combobox',
valueField: 'id',
displayField: 'value',
queryMode: 'local',
store: me.customStore
});

},


Good luck.

prasathm
14 Oct 2014, 6:12 AM
Is there any option to change grid column editor dynamically in 3.2 or 3.x ????