PDA

View Full Version : GroupingSummary + XMLStore + remoteRoot ?



dnoizet
3 Sep 2012, 4:45 AM
Hi,

I'm trying to use the GroupingSummary feature of the ExtJS grids. I use a XLMStore to retrieve the data. I need the summary lines to be retrieved from the XML file, they can't be computed locally. So I have to use the remoteRoot property.
The grid displays the data just fine, but the summary line appears empty.

I do not know precisely how should the summary data appear in the XML file (the given example in the official documentation uses a JSONStore).

Here is an example of the current structure of my XML file (dummy data and field names) :




<mydata>
<total>3</total>
<mydataRow>

<a>000</a>
<b>aaa</b>

</mydataRow>

<mydataRow>

<a>000</a>
<b>bbb</b>

</mydataRow>
<mydataRow>

<a>001</a>
<b>ccc</b>

</mydataRow>

<mydataSummary>

<mydataSummaryRow>

<a>000</a>
<b>1234</b>

</mydataSummaryRow>

<mydataSummaryRow>

<a>001</a>
<b>1234</b>

</mydataSummaryRow>

</mydataSummary>
</mydata>



So I set the XMLreader properties like follow:



{
type: "xml",
root: "mydata",
record: "mydataRow"
}



Then I add a GroupingSummary feature object to the grid:



features:
[
{

ftype: 'groupingsummary',
groupHeaderTpl:
[

'{name}'

],
startCollapsed: true,
remoteRoot: 'mydataSummary'

}
]



Lets say I set the grouping field to "a" in the store.

Then I load my store. No JavaScript errors thrown.

The grouping summary line appears but is empty.

If I try to name the summary rows to "mydataRow" instead of "mydataSummaryRow", then the summary rows appear like normal rows in the grid, and the grouping summary rows are still empty.
I tried that because I saw that when the summary rows are retrieved, the XMLReader is reused. Its root property is changed temporarily from "mydata" to "mydataSummary" but the record property does not get changed, it stays at "mydataRow".

Any help would be much appreciated.

Gabriel

vietits
3 Sep 2012, 6:12 PM
FYI:


Ext.onReady(function(){
var grid = Ext.create('Ext.grid.Panel', {
width: 300,
height: 300,
renderTo: Ext.getBody(),
features: [{
ftype: 'groupingsummary',
groupHeaderTpl: 'Subject: {name}',
}],
store: {
type: 'store',
fields: [{name: 'a', type: 'int'}, 'b'],
groupField: 'b',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'index.xml',
reader: {
type: 'xml',
root: 'mydata',
record: 'mydataRow'
}
}
},
columns: [{
text: 'B',
dataIndex: 'b'
},{
text: 'A',
dataIndex: 'a',
summaryType: 'sum'
}]
});
});

index.xml


<?xml version="1.0" encoding="UTF-8"?>
<mydata>
<mydataRow>
<a>1</a>
<b>aaa</b>
</mydataRow>
<mydataRow>
<a>2</a>
<b>bbb</b>
</mydataRow>
<mydataRow>
<a>3</a>
<b>ccc</b>
</mydataRow>
<mydataRow>
<a>4</a>
<b>aaa</b>
</mydataRow>
<mydataRow>
<a>5</a>
<b>bbb</b>
</mydataRow>
</mydata>

dnoizet
3 Sep 2012, 10:35 PM
Hi,

Thank you for your reply, but unfortunately that is not what I need. I need to compute the grouping summary lines on the server side. That's why I wish to use the remoteRoot property.

Do you know if that is even possible with an XML store ?

Thank you for your time.

Gabriel

vietits
4 Sep 2012, 1:57 AM
Try this:


Ext.onReady(function(){
var grid = Ext.create('Ext.grid.Panel', {
width: 300,
height: 300,
renderTo: Ext.getBody(),
features: [{
ftype: 'groupingsummary',
remoteRoot: 'mydataSummary',
groupHeaderTpl: 'Subject: {name}'
}],
store: {
type: 'store',
fields: [{name: 'a', type: 'int'}, 'b'],
groupField: 'b',
autoLoad: true,
proxy: {
type: 'ajax',
url: 'index.xml',
reader: {
type: 'xml',
root: 'mydata',
record: 'mydataRow',
getRoot: function(data) {
var nodeName = data.nodeName,
root = this.root;


if (!root || (nodeName && nodeName == root)) {
return data;
} else if (Ext.DomQuery.isXml(data)) {
return Ext.DomQuery.select(root, data);
}
}
}
}
},
columns: [{
text: 'B',
dataIndex: 'b'
},{
text: 'A',
dataIndex: 'a'
}]
});
});

index.xml


<?xml version="1.0" encoding="UTF-8"?>
<root>
<mydata>
<mydataRow>
<a>1</a>
<b>aaa</b>
</mydataRow>
<mydataRow>
<a>2</a>
<b>bbb</b>
</mydataRow>
<mydataRow>
<a>3</a>
<b>ccc</b>
</mydataRow>
<mydataRow>
<a>4</a>
<b>aaa</b>
</mydataRow>
<mydataRow>
<a>5</a>
<b>bbb</b>
</mydataRow>
</mydata>
<mydataSummary>
<mydataRow>
<a>50</a>
<b>aaa</b>
</mydataRow>
</mydataSummary>
<mydataSummary>
<mydataRow>
<a>70</a>
<b>bbb</b>
</mydataRow>
</mydataSummary>
<mydataSummary>
<mydataRow>
<a>30</a>
<b>ccc</b>
</mydataRow>
</mydataSummary>
</root>

dnoizet
4 Sep 2012, 4:12 AM
Thank you, it seems to work, although I don't understand what is that getRoot function (it's not documented in XMLReader) and why do you have to wrap each summary row "mydataRow" in a "mydataSummary" element instead of having one "mydataSummary" with several "mydataRow"... Could you explain please ?

dnoizet
4 Sep 2012, 4:21 AM
Correction, it is a little documented here http://docs.sencha.com/ext-js/4-1/#!/api/Ext.data.reader.Reader-method-getRoot