[2.2] GridView Error when you clear column grouping with XMLReader

[Abdusabri]

Platform Information:
- Ext Release and files: Ext V.2.2, files: ext-base.js, ext-core.js, ext-all.js
- Windows: WinXP Service Pack 3, 32 bit
- Browser: Internet Explorer 7 , IE7

The Issue:
- I am using the Ext grid panel with XMLReader and with grouping enabled
- I always start the grid with grouping initially applied according to the configuration options provided when creating the grid, example for the grouping configuration


store: new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({url: 'example.xml'}),
reader: myReader,
sortInfo:{field: 'Group', direction: "ASC"},
groupField:'Group'

- The data is being refreshed and updated frequently
- Initially everything works fine and the grouping is working as expected, also if i change the groupby column, everything goes without problems as long that i have the grid grouped by any field, it doesn

[Condor]

You should be using:


var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.loadXML(someXMLData);
myStore.loadData(xmlDoc.documentElement, true);

[Abdusabri]

You should be using:


var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.loadXML(someXMLData);
myStore.loadData(xmlDoc.documentElement, true);

I already tried using this technique, and i also had the same problem

Thank you

[Condor]

The only difference between store.loadData(data, true) and store.loadData(data, false) is a call to applySort.

Could you try if:

myStore.loadData(xmlDoc.documentElement, true);
myStore.applySort();
or

myStore.loadData(xmlDoc.documentElement, true);
myStore.applyGrouping();
fixes the problem?

[Abdusabri]

The only difference between store.loadData(data, true) and store.loadData(data, false) is a call to applySort.

Could you try if:

myStore.loadData(xmlDoc.documentElement, true);
myStore.applySort();
or

myStore.loadData(xmlDoc.documentElement, true);
myStore.applyGrouping();
fixes the problem?

Unfortunately neither of them worked, they still produced the same error

Thank you

[Condor]

1. You are using Ext 2.0.2 and not Ext 2.2!
2. Could you post a working example that doesn't require IIS (just plain .html and .js files)?

[mystix]

that's one seriously messed up distro -- ext-base.js is from 2.0.2, ext-core.js and ext-all.js are from 2.2.

[Abdusabri]

1. You are using Ext 2.0.2 and not Ext 2.2!
2. Could you post a working example that doesn't require IIS (just plain .html and .js files)?

- Sorry about this, i just misplaced the files because i was just creating a sample, but i am using version 2.2, and i made sure i have the correct files in this sample,

- In the attachment you will find the application with only HTML and JS files, as you requested, and with version 2.2 files correctly placed, and it will produce the same error

Thank you

[Abdusabri]

that's one seriously messed up distro -- ext-base.js is from 2.0.2, ext-core.js and ext-all.js are from 2.2.

Thank you very much for this clarification, i thought i've just misplaced the files, i checked them now, and it was just as you said, but now i am pretty sure i wasn

[Condor]

You can't add a record to a store with an id that is already in the store (ids need to be unique!).

Try removing the following line from the XmlReader config

id: "id"

ps. You are including WAY to much .js and .css files. You only need:

<link href="Ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript" src="Ext/adapter/ext/ext-base.js"></script>
<script language="javascript" type="text/javascript" src="Ext/ext-all.js"></script>

[Abdusabri]

You can't add a record to a store with an id that is already in the store (ids need to be unique!).

Try removing the following line from the XmlReader config

id: "id"


- I think this is not the problem, if the problem is with the store (ie, that the store can't accept a record unless its id is unique), then why it is working normally as long as i don't clear the grouping?!!! it should produce the error once i try to add the record, not when i want to clear the grouping.

- I am keeping the id on purpose, this is what i need, because if you remove the id the store keeps on adding new records every time, but when you have the id specified the store adds a new record if the id is unique or just updates its value if it is not unique, so it manages the inserts and updates, and that is exactly what i need the id for, and this is the required behavior, to manage the updates and inserts every time i load the data. not just keep on adding new records.

- It is true that when i removed the id the error didn't appear, but this doesn't solve my problem, this is not the required behavior, plus, i believe that the problem is not with the store, it is about the grouping, because simply this is when the error happens, not when just adding the data


Thank you for your cooperation

[Condor]

Your problem is that you want to use the add() method, but you don't want to add records, you want to update them.
This is simply not supported!

ps. The store is in an invalid state after you add/update the records. This means that any action that would cause the grid to refresh (like changing the grouping) will fail.

[Condor]

I recommend you switch to using:


var records = myReader.readRecords(xmlDoc.documentElement);
var newRecords = [];
Ext.each(records, function(r) {
var r2 = myStore.getById(r.id);
if (r2) {
r2.beginUpdate();
r2.fields.each(function(f) {
r2.set(f.name, r.get(f.name));
});
r2.endUpdate();
} else {
newRecords.push(r);
}
});
if (newRecords.length > 0) {
myStore.add(newRecords);
}

[Abdusabri]

Could you please answer this question, if i change the groupBy filed (ex, it was grouped by "Employee Name" and i changed it to "Employee Occupation") does this operation refresh the grid??

[Abdusabri]

I tried your suggested approach, it needed some changes to work properly, here is the modified code

var records = myReader.readRecords(xmlDoc.documentElement);
var newRecords = [];
for(var i = 0 ; i < records.totalRecords ; i++)
{
var r = records.records[i];
var r2 = myStore.getById(r.id);
if (r2) {
r2.beginEdit();
r2.fields.each(function(f) {
r2.set(f.name, r.get(f.name));
});
r2.endEdit();
r2.commit();
} else {
newRecords.push(r);
}
}
if (newRecords.length > 0) {
myStore.add(newRecords);
myStore.commitChanges();
}
but it left me with another problem that i had to deal with.
The gridview would always scroll to the last updated record, which was very annoying because i am updating the data frequently, so it was very annoying to have the grid scroll so many times, in my case i had to override this behavior.
After some investigation i came up with the following override which solved this issue for me

Ext.override(Ext.grid.GridView, {
focusRow : Ext.emptyFn
});
so the grid won't scroll to the modified records, and it will maintain its scrolling, this works fine in my case, but you have to be aware of it, maybe in some other cases when the data is not updated frequently this could be valuable.

Also, the red triangles stating that there is dirty records where appearing, also in my case i didn't like to have them appear as i am changing the data frequently, so i made some changes in the Ext.grid.gridview.doRender method to disable the dirty indicators, here is the modifications

doRender : function(cs, rs, ds, startRow, colCount, stripe){
var ts = this.templates, ct = ts.cell, rt = ts.row, last = colCount-1;
var tstyle = 'width:'+this.getTotalWidth()+';';
var buf = [], cb, c, p = {}, rp = {tstyle: tstyle}, r;
for(var j = 0, len = rs.length; j < len; j++){
r = rs[j]; cb = [];
var rowIndex = (j+startRow);
for(var i = 0; i < colCount; i++){
c = cs[i];
p.id = c.id;
p.css = i == 0 ? 'x-grid3-cell-first ' : (i == last ? 'x-grid3-cell-last ' : '');
p.attr = p.cellAttr = "";
p.value = c.renderer(r.data[c.name], p, r, rowIndex, i, ds);
p.style = c.style;
if(p.value == undefined || p.value === "") p.value = " ";
// if(r.dirty && typeof r.modified[c.name] !== 'undefined'){
// p.css += ' x-grid3-dirty-cell';
// }
cb[cb.length] = ct.apply(p);
}
var alt = [];
if(stripe && ((rowIndex+1) % 2 == 0)){
alt[0] = "x-grid3-row-alt";
}
// if(r.dirty){
// alt[1] = " x-grid3-dirty-row";
// }
rp.cols = colCount;
if(this.getRowClass){
alt[2] = this.getRowClass(r, rowIndex, rp, ds);
}
rp.alt = alt.join(" ");
rp.cells = cb.join("");
buf[buf.length] = rt.apply(rp);
}
return buf.join("");
}


FYI, this is the function where the error was happening, after some debugging, i found that when you clear or remove the grouping, the first row of rs[] array would be undefined, and this is what was generating the error, when trying to set the p properties, and access any property of r, an exception will occur because r would be undefined.

I tried to edit this behavior somehow and check if the row r is undefined, but it didn't work properly for me (for sure it could be because i don't really understand every single line of code of this function).

I was keen to report this, maybe some people could find this helpful.

Many thanks for your cooperation

[Condor]

1. There is an open bugreport on the row focus issue.
2. Doesn't commiting the records remove the dirty flag?
3. You can also remove the dirty indicator with a simple CSS rule:

.x-grid3-dirty-cell{background:transparent;}