Probably not a Ag-Grid problem but I'm stuck on this one for some time.
Having a component in react like this :
export default class Recrutement extends React.Component {
constructor(props) {
super(props);
this.state = {
candidats: [], // We suppose here that values are filled
values: [] // We suppose here that values are filled
};
this.getContacts();
this.getValues();
}
columnDefs = [{
cellRenderer: function(params) {
return '<span><i class="material-icons"></i></span>';
},
suppressMovable: true,
width: 100,
colId: 1,
//width: (self.columnDefinitions.find(function (v) { return v.colId === 1 }) || {}).size || 50,
pinned: 'left',
suppressFilter: true
},
{
width: 100,
headerName: "Formation",
editable: true,
colId: 7,
suppressMovable: true,
//width : (self.columnDefinitions.find(function (v) { return v.colId === 7 }) || {}).size || null,
autoHeight: true,
cellEditor: 'agSelectCellEditor',
valueGetter: function(params) {
if (params.data.candidat.formationId === null)
return "";
return this.state.values.formations.find(function(val) {
return val.id === params.data.candidat.formationId;
}).name;
},
valueSetter: function(params) {
return selectValueSetter(this.state.values.formations, true, 'formationId', params);
},
cellEditorParams: function() {
return {
values: this.state.values.formations
.sort(function(a, b) {
if (a.name < b.name) return -1;
if (a.name > b.name) return 1;
return 0;
})
.map(function(v) {
return v.name;
})
};
},
filter: "anyOfWordsFilter"
},
];
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
What I want is that valueGetter for example have access to this.state. However here, I just get everytime :
Uncaught TypeError: Cannot read property 'state' of undefined
I tried the bind system (or maybe I did it wrong, probably :D), the arrow one however none of them are working.
How can I access the state in this condition ? To use Ag-grid, I need my array to stay like this (function can change)
replace
valueSetter: function(params) {
return selectValueSetter(this.state.values.formations, true, 'formationId', params);
},
by
valueSetter: (params) => {
return selectValueSetter(this.state.values.formations, true, 'formationId', params);
},
and please ready this post and this one
Related
Is there any way to restrict the height (eg to n * .cellHeight) for the built-in agRichSelectCellEditor?
I see there is a cellRenderer but this only affects the individual list-items - I know I can always implement a custom editor but wanted to see if this was possible first
override the CSS rule .ag-rich-select-list
.ag-rich-select-list {
width: 100%;
min-width: 200px;
height: auto !important;
}
var students = [{
first_name: 'Bob',
last_name: 'Harrison',
gender: 'Male',
address: '1197 Thunder Wagon Common, Cataract, RI, 02987-1016, US, (401) 747-0763',
mood: "Happy",
country: {
name: 'Ireland',
code: 'IE'
}
}, {
first_name: 'Mary',
last_name: 'Wilson',
gender: 'Female',
age: 11,
address: '3685 Rocky Glade, Showtucket, NU, X1E-9I0, CA, (867) 371-4215',
mood: "Sad",
country: {
name: 'Ireland',
code: 'IE'
}
}, {
first_name: 'Sadiq',
last_name: 'Khan',
gender: 'Male',
age: 12,
address: '3235 High Forest, Glen Campbell, MS, 39035-6845, US, (601) 638-8186',
mood: "Happy",
country: {
name: 'Ireland',
code: 'IE'
}
}, {
first_name: 'Jerry',
last_name: 'Mane',
gender: 'Male',
age: 12,
address: '2234 Sleepy Pony Mall , Drain, DC, 20078-4243, US, (202) 948-3634',
mood: "Happy",
country: {
name: 'Ireland',
code: 'IE'
}
}];
// double the array twice, make more data!
students.forEach(function(item) {
students.push(cloneObject(item));
});
students.forEach(function(item) {
students.push(cloneObject(item));
});
students.forEach(function(item) {
students.push(cloneObject(item));
});
function cloneObject(obj) {
return JSON.parse(JSON.stringify(obj));
}
var columnDefs = [{
field: "first_name",
headerName: "First Name",
width: 120,
editable: true
},
{
field: "last_name",
headerName: "Last Name",
width: 120,
editable: true
},
{
field: "gender",
width: 100,
editable: true,
cellRenderer: 'genderCellRenderer',
cellEditor: 'agRichSelectCellEditor',
cellEditorParams: {
cellRenderer: 'genderCellRenderer',
values: ['Male', 'Female']
}
},
{
field: "age",
width: 80,
editable: true,
cellEditor: 'numericCellEditor'
},
{
field: "mood",
width: 100,
cellRenderer: 'moodCellRenderer',
cellEditor: 'moodEditor',
editable: true
},
{
field: "country",
width: 110,
cellRenderer: 'countryCellRenderer',
cellEditor: 'agRichSelectCellEditor',
keyCreator: function(country) {
return country.name;
},
cellEditorParams: {
cellRenderer: 'countryCellRenderer',
values: [{
name: 'Ireland',
code: 'IE'
},
{
name: 'UK',
code: 'UK'
},
{
name: 'France',
code: 'FR'
}
]
},
editable: true
},
{
field: "address",
editable: true,
cellEditor: 'agLargeTextCellEditor',
cellEditorParams: {
maxLength: '300', // override the editor defaults
cols: '50',
rows: '6'
}
}
];
var gridOptions = {
columnDefs: columnDefs,
rowData: students,
defaultColDef: {
editable: true,
sortable: true,
flex: 1,
minWidth: 100,
filter: true,
resizable: true
},
onRowEditingStarted: function(event) {
console.log('never called - not doing row editing');
},
onRowEditingStopped: function(event) {
console.log('never called - not doing row editing');
},
onCellEditingStarted: function(event) {
console.log('cellEditingStarted');
},
onCellEditingStopped: function(event) {
console.log('cellEditingStopped');
},
components: {
genderCellRenderer: GenderCellRenderer,
numericCellEditor: NumericCellEditor,
moodCellRenderer: MoodCellRenderer,
moodEditor: MoodEditor,
countryCellRenderer: CountryCellRenderer
}
};
function getCharCodeFromEvent(event) {
event = event || window.event;
return (typeof event.which == "undefined") ? event.keyCode : event.which;
}
function isCharNumeric(charStr) {
return !!/\d/.test(charStr);
}
function isKeyPressedNumeric(event) {
var charCode = getCharCodeFromEvent(event);
var charStr = String.fromCharCode(charCode);
return isCharNumeric(charStr);
}
// simple function cellRenderer, just returns back the name of the country
function CountryCellRenderer(params) {
return params.value.name;
}
// function to act as a class
function NumericCellEditor() {}
// gets called once before the renderer is used
NumericCellEditor.prototype.init = function(params) {
// create the cell
this.eInput = document.createElement('input');
if (isCharNumeric(params.charPress)) {
this.eInput.value = params.charPress;
} else {
if (params.value !== undefined && params.value !== null) {
this.eInput.value = params.value;
}
}
var that = this;
this.eInput.addEventListener('keypress', function(event) {
if (!isKeyPressedNumeric(event)) {
that.eInput.focus();
if (event.preventDefault) event.preventDefault();
} else if (that.isKeyPressedNavigation(event)) {
event.stopPropagation();
}
});
// only start edit if key pressed is a number, not a letter
var charPressIsNotANumber = params.charPress && ('1234567890'.indexOf(params.charPress) < 0);
this.cancelBeforeStart = charPressIsNotANumber;
};
NumericCellEditor.prototype.isKeyPressedNavigation = function(event) {
return event.keyCode === 39 ||
event.keyCode === 37;
};
// gets called once when grid ready to insert the element
NumericCellEditor.prototype.getGui = function() {
return this.eInput;
};
// focus and select can be done after the gui is attached
NumericCellEditor.prototype.afterGuiAttached = function() {
this.eInput.focus();
};
// returns the new value after editing
NumericCellEditor.prototype.isCancelBeforeStart = function() {
return this.cancelBeforeStart;
};
// example - will reject the number if it contains the value 007
// - not very practical, but demonstrates the method.
NumericCellEditor.prototype.isCancelAfterEnd = function() {
var value = this.getValue();
return value.indexOf('007') >= 0;
};
// returns the new value after editing
NumericCellEditor.prototype.getValue = function() {
return this.eInput.value;
};
// any cleanup we need to be done here
NumericCellEditor.prototype.destroy = function() {
// but this example is simple, no cleanup, we could even leave this method out as it's optional
};
// if true, then this editor will appear in a popup
NumericCellEditor.prototype.isPopup = function() {
// and we could leave this method out also, false is the default
return false;
};
function GenderCellRenderer() {}
GenderCellRenderer.prototype.init = function(params) {
this.eGui = document.createElement('span');
if (params.value !== "" || params.value !== undefined || params.value !== null) {
var gender = '<img border="0" width="15" height="10" src="https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/images/' + params.value.toLowerCase() + '.png">';
this.eGui.innerHTML = gender + ' ' + params.value;
}
};
GenderCellRenderer.prototype.getGui = function() {
return this.eGui;
};
function MoodCellRenderer() {}
MoodCellRenderer.prototype.init = function(params) {
this.eGui = document.createElement('span');
if (params.value !== "" || params.value !== undefined || params.value !== null) {
var imgForMood = params.value === 'Happy' ? 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/images/smiley.png' : 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/images/smiley-sad.png';
this.eGui.innerHTML = '<img width="20px" src="' + imgForMood + '" />';
}
};
MoodCellRenderer.prototype.getGui = function() {
return this.eGui;
};
function MoodEditor() {
this.defaultImgStyle = 'padding-left:10px; padding-right:10px; border: 1px solid transparent; padding: 4px;';
this.selectedImgStyle = 'padding-left:10px; padding-right:10px; border: 1px solid lightgreen; padding: 4px;';
}
MoodEditor.prototype.onKeyDown = function(event) {
var key = event.which || event.keyCode;
if (key == 37 || // left
key == 39) { // right
this.toggleMood();
event.stopPropagation();
}
};
MoodEditor.prototype.toggleMood = function() {
this.selectMood(this.mood === 'Happy' ? 'Sad' : 'Happy');
};
MoodEditor.prototype.init = function(params) {
this.container = document.createElement('div');
this.container.style = "border-radius: 15px; border: 1px solid grey;background: #e6e6e6;padding: 15px; text-align:center;display:inline-block;outline:none";
this.container.tabIndex = "0"; // to allow the div to capture keypresses
this.happyImg = document.createElement('img');
this.happyImg.src = 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/images/smiley.png';
this.happyImg.style = this.defaultImgStyle;
this.sadImg = document.createElement('img');
this.sadImg.src = 'https://raw.githubusercontent.com/ag-grid/ag-grid/master/grid-packages/ag-grid-docs/src/images/smiley-sad.png';
this.sadImg.style = this.defaultImgStyle;
this.container.appendChild(this.happyImg);
this.container.appendChild(this.sadImg);
var that = this;
this.happyImg.addEventListener('click', function(event) {
that.selectMood('Happy');
params.stopEditing();
});
this.sadImg.addEventListener('click', function(event) {
that.selectMood('Sad');
params.stopEditing();
});
this.container.addEventListener('keydown', function(event) {
that.onKeyDown(event)
});
this.selectMood(params.value);
};
MoodEditor.prototype.selectMood = function(mood) {
this.mood = mood;
this.happyImg.style = (mood === 'Happy') ? this.selectedImgStyle : this.defaultImgStyle;
this.sadImg.style = (mood === 'Sad') ? this.selectedImgStyle : this.defaultImgStyle;
};
// gets called once when grid ready to insert the element
MoodEditor.prototype.getGui = function() {
return this.container;
};
MoodEditor.prototype.afterGuiAttached = function() {
this.container.focus();
};
MoodEditor.prototype.getValue = function() {
return this.mood;
};
// any cleanup we need to be done here
MoodEditor.prototype.destroy = function() {};
MoodEditor.prototype.isPopup = function() {
return true;
};
// setup the grid after the page has finished loading
document.addEventListener('DOMContentLoaded', function() {
var gridDiv = document.querySelector('#myGrid');
new agGrid.Grid(gridDiv, gridOptions);
});
.ag-rich-select-list {
width: 100%;
min-width: 200px;
height: auto !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script>
var __basePath = './';
</script>
<style media="only screen">
html,
body {
height: 100%;
width: 100%;
margin: 0;
box-sizing: border-box;
-webkit-overflow-scrolling: touch;
}
html {
position: absolute;
top: 0;
left: 0;
padding: 0;
overflow: auto;
}
body {
padding: 1rem;
overflow: auto;
}
</style>
<script src="https://unpkg.com/#ag-grid-enterprise/all-modules#24.1.0/dist/ag-grid-enterprise.min.js"></script>
</head>
<body>
<div id="myGrid" style="height: 100%;" class="ag-theme-alpine"></div>
</body>
</html>
I have to render ag-grid table in dialog box.
My grid has multi cellRenderer, valueGetter and cellRendererParams in columnDefs.
Instead of converting server data to rowData and using field to render, I have used valueGetter to fetch the value from the server data like
valueGetter: 'data.screen1.graph.visible'.
My ag-grid with 13 columns and 150 rows is taking noticeable time to render.
Is it because of valueGetter that my table is taking time to render?
Below is my sample data:
private createColumnDefs() {
this.columnDefs = [{
headerName: 'Header1',
cellRenderer: (params) => {
return params.data.serverObject1.function === 'input' ? 'I' : 'O';
},
minWidth: 50,
width: 70,
}, {
headerName: 'Header2',
field: 'serverObject1.name',
minWidth: 60,
width: 80,
}, {
headerName: 'Header3',
field: 'value',
cellRenderer: 'valueFieldRenderer',
minWidth: 100,
width: 250,
}, {
headerName: 'Header4',
cellRenderer: 'checkBoxRenderer',
valueGetter: 'data.serverObject1.graph.visible',
cellRendererParams(params) {
return {
disabledVal : params.data.localArray.length > 0 || params.data.attribute1 !== null
};
},
minWidth: 70,
width: 70,
}, {
headerName: 'Header5',
cellRenderer: 'checkBoxRenderer',
valueGetter: 'data.serverObject1.archive',
cellRendererParams(params) {
return {
disabledVal : params.data.serverObject1.function === 'input'
};
},
minWidth: 70,
width: 70,
}, {
headerName: 'Header6',
cellRenderer: 'checkBoxRenderer',
valueGetter: 'data.serverObject1.alarm',
cellRendererParams(params) {
return {
disabledVal : !((params.data.serverObject1.function === 'output') && (params.data.serverObject1.type === 'bool'))
};
},
minWidth: 70,
width: 70,
},
{
headerName: 'Header7',
cellRenderer: 'textBoxRenderer',
valueGetter: 'data.serverObject1.active',
minWidth: 150,
width: 150,
},
{
headerName: 'Header8',
cellRenderer: 'textBoxRenderer',
valueGetter: 'data.serverObject1.inactive',
minWidth: 150,
width: 150,
},
{
headerName: 'Header11',
cellRenderer: 'textBoxRenderer',
valueGetter: (params) => params.data.text1,
minWidth: 150,
width: 150,
cellStyle: (params) => {
return (this.diagram === 'XYZ' &&
!(params.data.serverObject1.function === 'output' || params.data.serverObject1.type === 'string'
|| params.data.serverObject1.type === 'int')) ? {display: 'block'} : {display: 'none'};
}}
];
}
cell renderer:
#Component({
selector: 'app-check-box',
template:
`
<input type="checkbox" [(ngModel)]="params.value" [id]="getID(params)" class="primary small"
(change)="onChange($event)">
<label [for]="getID(params)" class="text-hide">hidden</label>
`,
styleUrls: ['./test.component.css']
})
// tslint:disable-next-line:component-class-suffix
export class CheckBoxRenderer implements AfterViewInit, ICellRendererAngularComp {
private params: ICellRendererParams;
constructor(private readonly translateService: TranslateService) { }
agInit(params: ICellRendererParams): void {
this.params = params;
}
public onChange(event) {
}
refresh(params: any): boolean {
return false;
}
public getID(params): string {
return params.column.colId + params.rowIndex;
}
afterGuiAttached(params?: IAfterGuiAttachedParams): void {
}
ngAfterViewInit(): void {
}
translate(key: string, params?: any): string {
return this.translateService.instant(key, params);
}
}
Should I consider converting to rowData to decrease loading time?
can I do a conditional template on the first column below?
for example:
If my row has score property and I want to hide the input when my score is above 70?
let columns = [
{ width: 30, suppressSorting: true, suppressMenu: true, template: '<input type="checkbox">' },
{ headerName: "Score", filter: 'number', valueGetter: (params : any) =>
params.data.traces ? (<Alert> params.data.traces[0]).severity : params.data.severity, width:70},
{ headerName: "Behaviour tags" },
{ headerName: "Host", field: "host_name" },
{ headerName: "Group Id", cellRenderer: 'group', width:140 },
{ headerName: "Comments",width:290 }
];
Use cellRenderer property in your column object
let columns = [{ width: 30, suppressSorting: true, suppressMenu: true,
cellRenderer: function (params) {
var display = 'block';
if (params.data.score > 70) {
display = 'none';
}
var html = '<input type="checkbox" style="display: ' + display + '">';
return html;
}
}]
In params.data you have all row data
In short, I have a login panel, which will be shown when onClick event is true, but I get error Cannot read property 'dom' of null. When I click second time - the panel is shown, but some elements of it are not shown. When I click for 3th time, the other elements has show, an last, I ger error "Cannot call method 'bringToFront' of undefined".
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.ns('Site.login');
var globalKeyMap = new Ext.KeyMap(document);
globalKeyMap.accessKey = function(key, handler, scope) {
var h = function(n, e) {
e.preventDefault();
handler.call(scope || this, n, e);
};
this.on(key, h, scope);
};
var trackEnter = function(tf, e) {
if (e.keyCode == 13) {
e.stopPropagation();
doLogin();
}
}
var doLogin = function() {
var f = loginPanel.getForm();
if (f.isValid()) {
f.doAction(new Hypo.form.Action.DwrSubmit(f, {
waitMsg: 'Authentication is in progress',
invoker: function(form, cb) {
Login.login(form.getValues(), cb);
},
success: function(fp, o) {
loginForm.hide();
Ext.getBody().addClass("x-body-masked");
var w = loginForm;
w.mask.setSize(Ext.lib.Dom.getViewWidth(true), Ext.lib.Dom.getViewHeight(true));
w.mask.show();
if(o.result.data[0].authorities[0].authority=='ROLE_SUPERVISOR')
{
setTimeout('document.location = "AdminUsers.jsp"');
}
else if(o.result.data[0].authorities[0].authority=='ROLE_ADMIN')
{
setTimeout('document.location = "AdminUsers.jsp"');
}
else
{
setTimeout('document.location = "List.jsp"');
}
}
}));
}
}
var loginPanel = new Ext.FormPanel({
id: 'loginPanel',
labelWidth: 75, // label settings here cascade unless overridden
frame: false,
border: false,
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {
width: 230
},
defaultType: 'textfield',
autoHeight: true,
items: [{
id: 'idxLogin',
fieldLabel: 'Login',
name: 'login',
allowBlank: false,
enableKeyEvents: true,
maxLength: 50,
listeners: {
'keypress': trackEnter
}
}, new Ext.form.TextField({
fieldLabel: 'Password',
name: 'password',
inputType: 'password',
enableKeyEvents: true,
maxLength: 50,
listeners: {
'keypress': trackEnter
}
})
]
});
var loginForm = new Ext.Window({
layout : 'fit',
width : 350,
closable : false,
modal: true,
plain : true,
title: 'User Authentication',
items: loginPanel,
autoHeight: true,
buttons: [{
text: 'OK',
handler: doLogin
},{
text: 'Cancel',
handler: function() {
loginForm.hide();
}
}],
listeners: {
'activate': function() {
setTimeout(function() {
Ext.getCmp("idxLogin").focus();
}, 100);
}
}
});
Site.login.window = loginForm;
});
Login
I tryed to add renderTo:'someDiv' and add to body a div with id "someDiv". But I received the same error message.
Please, help with that.
in my first ExtJs4 project i use a editable grid with the feature rowbody to have a big textfield displayed under each row.
I want it to be editable on a dblclick. I succeeded in doing so by replacing the innerHTML of the rowbody by a textarea but the special keys don't do what they are supposed to do (move the cursor). If a use the textarea in a normal field i don't have this problem. Same problem in IE7 and FF4
gridInfo = Ext.create('Ext.ux.LiveSearchGridPanel', {
id: 'gridInfo',
height: '100%',
width: '100%',
store: storeInfo,
columnLines: true,
selType: 'cellmodel',
columns: [
{text: "Titel", flex: 1, dataIndex: 'titel', field: {xtype: 'textfield'}},
{text: "Tags", id: "tags", flex: 1, dataIndex: 'tags', field: {xtype: 'textfield'}},
{text: "Hits", dataIndex: 'hits'},
{text: "Last Updated", renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'lastChange'}
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
features: [
{
ftype: 'rowbody',
getAdditionalData: function (data, idx, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
return {
rowBody: data.desc, //the big textfieldvalue, can't use a textarea here 8<
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
};
}
},
{ftype: 'rowwrap'}
]
});
me.on('rowbodydblclick', function (gridView, el, event, o) {
//...
rb = td.down('.x-grid-rowbody').dom;
var value = rb.innerText ? rb.innerText : rb.textContent;
rb.innerHTML = '';
Ext.create('Ext.form.field.TextArea', {
id: 'textarea1',
value: value,
renderTo: rb,
border: false,
enterIsSpecial: true,
enableKeyEvents: true,
disableKeyFilter: true,
listeners: {
'blur': function (el, o) {
rb.innerHTML = el.value;
},
'specialkey': function (field, e) {
console.log(e.keyCode); //captured but nothing happens
}
}
}).show();
//...
});
damn, can't publish my own solution, looks like somebody else has to answer, anyway, here is the function that works
function editDesc(me, gridView, el, event, o) {
var width = Ext.fly(el).up('table').getWidth();
var rb = event.target;
var value = rb.innerText ? rb.innerText : rb.textContent;
rb.innerHTML = '';
var txt = Ext.create('Ext.form.field.TextArea', {
value: value,
renderTo: rb,
border: false,
width: width,
height: 300,
enterIsSpecial: true,
disableKeyFilter: true,
listeners: {
'blur': function (el, o) {
var value = el.value.replace('\n', '<br>')
rb.innerHTML = value;
},
'specialkey': function (field, e) {
e.stopPropagation();
}
}
});
var txtTextarea = Ext.fly(rb).down('textarea');
txtTextarea.dom.style.color = 'blue';
txtTextarea.dom.style.fontSize = '11px';
}
Hi Molecule Man, as an alternative to the approach above i tried the Ext.Editor.
It works but i want it inline but when i render it to the rowbody, the field blanks and i have no editor, any ideas ?
gridInfo = Ext.create('Ext.grid.Panel', {
id: 'gridInfo',
height: '100%',
width: '100%',
store: storeInfo,
columnLines: true,
selType: 'cellmodel',
viewConfig: {stripeRows: false, trackOver: true},
columns: [
{text: "Titel", flex: 1, dataIndex: 'titel', field: {xtype: 'textfield'}},
//...
{
text: "Last Updated", renderer: Ext.util.Format.dateRenderer('d/m/Y'), dataIndex: 'lastChange'
}
],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
features: [
{
ftype: 'rowbody',
getAdditionalData: function (data, idx, record, orig) {
var headerCt = this.view.headerCt,
colspan = headerCt.getColumnCount();
return {
rowBody: data.desc,
rowBodyCls: this.rowBodyCls,
rowBodyColspan: colspan
};
}
}
],
listeners: {
rowbodyclick: function (gridView, el, event) { //werkt
editDesc(this, gridView, el, event);
}
}
})
;
function editDesc(me, gridView, el, event, o) {
var rb = event.target;
me.txt = new Ext.Editor({
field: {xtype: 'textarea'},
updateEl: true,
cancelOnEsc: true,
floating: true,
renderTo: rb //when i do this, the field becomes empty and i don't get the editor
});
me.txt.startEdit(el);
}
This is just to set the question answered, see solution above