PDA

View Full Version : Bug with CellEditor



Dokumenta
25 Nov 2014, 1:41 AM
First of all, sorry for my bad English. Im new in this forum and I don't know if this question is correct here, but I think so. I have 2 issues when I put a CellEditor on my grid. I can't modify the values of the cell, because the correct value don't load on the editor. In the case of the celltext, you see the HTML code, ( <div unselectable="on" class="x-grid-cell-inner x-unselectable" style="; text-align: left;" id="ext-gen1489">AD678913</div>)
In all the cases the value don't load and don't save.
The columns of the grid changes along the program, and I load the correct columns with the code below:



setCategoryFields: function(fields) {
var cols = Ext.Array.clone(this.fixedColumns);
if (fields instanceof Array && fields.length > 0) {
fields.forEach(function(f) {
cols[cols.length] = {
xtype: 'gridcolumn', dataIndex: f.name (http://f.name/),
getEditor: function(record) {

var fieldType = 'textfield';
if (f.ctype === 'text') {
fieldType = 'textfield';

}else
if(f.ctype === 'date') {
fieldType = 'datefield';

}else
if(f.ctype === "numeric") {
fieldType = 'numberfield';

}

return Ext.create('Ext.grid.CellEditor', {
field: {
xtype: fieldType,
allowBlank: false,

}
});
},
text: f.name (http://f.name/),
//text: Ext.String.capitalize(f.name.toLowerCase()).replace('_',' ').replace('_',' '), // tdCls: 'x-change-cell',
renderer: function(val, meta, record) {
var obj = record.get('categoryData')[f.name (http://f.name/)]; // record es un documento
var rfn = Share.CategoryFields.getFieldRenderer(f.ctype);
return rfn((obj || {}).value);

}
}
}, this);
}

try{
this.reconfigure(this.store, cols);
}catch(err) {
console.log("Error de ID...pero sigue, y funciona OK");
}
},



Thanks in advance,
Josť.

joel.watson
25 Nov 2014, 9:48 AM
Hi Dokumenta--

First off, welcome to the forums!

Regarding your issue, can you let me know which version of Ext JS 4 you're using? Secondly, can you provide a working test case of this issue, either by posting here in the thread or (ideally) by creating a Fiddle (https://fiddle.sencha.com/)? I'll be happy to help test this along with you.

Thanks!

Dokumenta
26 Nov 2014, 1:49 AM
I leave several catches and the complete code of the panel, and I do not understand well the SenchaFiddle (Im too new: S)
Writting in the Cell:
51105
After writting in the cell ( the value dont change ):
51106




Ext.define('Hermes.view.document.Document' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.document',
title : 'Documentos',
store: 'Documents',
autoScroll:true,
columnLines: true,
fixedColumns: [


{ xtype: 'gridcolumn', width: 30, dataIndex: 'fileClass', text: '', renderer: function(value) { return Ext.String.format('<div class="mimeType {0}"></div>', value); } },
{ xtype: 'gridcolumn', dataIndex: 'fileName', text: 'Nombre de Archivo',
getEditor: function(record) {

return Ext.create('Ext.grid.CellEditor', {
field: {
xtype: 'textfield',
allowBlank: false,
}
});
}
}
],

columns: [],
plugins: [
{
ptype: 'cellediting',
clicksToEdit: 1
}
],
initComponent: function() {
this.columns = Ext.Array.clone(this.fixedColumns);
//CHECKKK
this.selModel = Ext.create('Ext.selection.CheckboxModel', {});
this.callParent(arguments);
},
setCategoryFields: function(fields) {
var cols = Ext.Array.clone(this.fixedColumns);
//console.log("Cols"+cols);
if (fields instanceof Array && fields.length > 0) {
fields.forEach(function(f) {
cols[cols.length] = {
xtype: 'gridcolumn', dataIndex: f.name,
getEditor: function(record) {
var fieldType = 'textfield';
if (f.ctype === 'text') {
fieldType = 'textfield';
}else
if(f.ctype === 'date') {
fieldType = 'datefield';
}else
if(f.ctype === "numeric") {
fieldType = 'numberfield';
}

return Ext.create('Ext.grid.CellEditor', {
field: {
xtype: fieldType,
allowBlank: false
}
});
},
text: f.name,
renderer: function(val, meta, record) {
var obj = record.get('categoryData')[f.name]; // record es un documento
var rfn = Share.CategoryFields.getFieldRenderer(f.ctype);
return rfn((obj || {}).value);
}

}
}, this);
}

try{
this.reconfigure(this.store, cols);
}catch(err) {
console.log("Error de ID...pero sigue, y funciona OK");
}
},
getSelection: function() {
return this.getSelectionModel().getSelection();
},
firstSelected: function() {
return this.getSelectionModel().getSelection()[0];
}
});



The column with the dataIndex: "fileName", changes correctly in the grid, and dont have any issues.
I think that its a problem with the charge of the new columns, but I don't understand.
Thanks a lot for your reply =)

joel.watson
26 Nov 2014, 2:06 PM
Hi Dokumenta--

I tried to turn what you posted into a fiddle. What I have seems to be working as expected. Perhaps you could fork the Fiddle and tweak it to show how to reproduce the issue?

Thanks!

https://fiddle.sencha.com/#fiddle/e3v

Dokumenta
27 Nov 2014, 1:36 AM
Thanks a lot for all of your work. The program its a little complex than that... I try to explain..
You dont have only documents, you also have categories, in every category you have more columns for the documents, and this colums make the mistake that I can't resolve.
I modify the code of the Fiddle, but I make mistakes ( Im a big noob, I know :s). Try to understand the code =)
Thanks Thanks Thanks Thanks for all your help. I know that its hard to help without time to expend and Im very grateful for all your help.

https://fiddle.sencha.com/#fiddle/e4l

joel.watson
1 Dec 2014, 5:41 PM
Hi Dokumenta--

The part in your fiddle that is broken is the data configuration. If you correct that, it should run. I did notice, however, that there are references in the setCategoryFields() method that are not extant in the Fiddle. In looking at the code, however, my first instinct would be to check your renderer method...that seems to be a prime suspect which may be causing the issue.

Thanks!

Dokumenta
15 Dec 2014, 1:39 AM
Yes, the error its in the renderer function, I try to comment this function (with /*function*/)and the cellediting works fine...but without any data. How can I modify this function to permit the cellediting?
Thanks a lot for all your help =)

joel.watson
17 Dec 2014, 8:11 AM
Yes, the error its in the renderer function, I try to comment this function (with /*function*/)and the cellediting works fine...but without any data. How can I modify this function to permit the cellediting?
Thanks a lot for all your help =)

Hi Dokumenta--

Without a runnable test case in Fiddle, it's very difficult to know what to advise. Can you try creating the Fiddle again?

Thanks!

eyo
18 Dec 2014, 12:41 AM
Hello Dokumenta,

If you are using a model, please check your fieldnames or dataIndex with model values. If they're different from each other it can be write like this.

e.g. dataIndex : "remark" , in model "remarks"

Dokumenta
18 Dec 2014, 1:06 AM
I correct the code of the fiddle, I don't know how I can write the "categoryData" ( if you see I try a lot of options, but I dont find the correct one).
If you know how write that, I change, and you can see the mistake I have in my code.

Thanks eyo, but I see that the fieldnames and dataIndex are correct.
See my Fiddle code here:
https://fiddle.sencha.com/#fiddle/e4l
Thanks a lot for all your help.

Dokumenta
11 Jan 2015, 11:56 PM
Please help me, where close to the solution :) :)

joel.watson
13 Jan 2015, 9:34 AM
Hi Dokumenta--

Your fiddle still has references to code that the Fiddle does not know about :


renderer: function(val, meta, record) {
var obj = record.get('categoryData')[f.name]; // record es un documento
var rfn = Share.CategoryFields.getFieldRenderer(f.ctype); // no "Share.CategoryFields" class is defined
return rfn((obj || {}).value);
}


Can you update it to include that?

Thanks

Dokumenta
14 Jan 2015, 1:56 AM
I change the call for the class "Share.CategoryFields.getFieldRenderer(f.ctype);"
For the code that I need ( that class its to hard to paste in the fiddle )
And you can see my problem running.
If you click in a cell you see
<div unselectable="on" class="x-grid-cell-inner x-unselectable" style="text-align: left;" id="ext-gen1050">&nbsp;</div>
( If you choose Ext 5, dont see that error )

And if you change the value of the cell you can't see anything when you change to another cell ( only the red tick, that you make a change).

Here is the code:
https://fiddle.sencha.com/#fiddle/e4l

Thanks a lot for all your work, youre amazing =)

joel.watson
14 Jan 2015, 9:14 AM
Ok, I see what you're saying now. It looks like it's a bug in 4.0.7. If you run it in 4.1 or higher, you'll see it working as expected.

One easy fix for this is to add the "Invoice" field to your Documents store, which is currently missing. This will force it to return the value as expected.

Frankly, though, I think the best approach would be to upgrade if possible.

Thanks!

Dokumenta
15 Jan 2015, 12:13 AM
Yes if you change the version you can't have the "<div>" error, its impossible change the version now for me, but I try this in a future.
But the another mistake, still happen in all the versions. If you write in the "Invoice" cell and change to another cell you can't see the changes, only see when you click again in the same cell.
Try to help me in this.
Thanks for all =)