PDA

View Full Version : GroupingStore w/ XmlReader Issues



16 Sep 2009, 6:05 AM
I'm trying to use a GroupingStore with an XmlReader and I'm having some issues. Most importantly, my xml url doesn't appear be requested, at least not according to FireBug's Net tab. I don't get any script errors in FireBug, however my data just doesn't show up in my GroupingView as I would expect. Below is the source of my javascript:



Ext.onReady(function() {
Ext.QuickTips.init();

Ext.util.CSS.createStyleSheet('#detailPanel .x-panel-body { padding: 10px; background: #eee; color: #555; } #detailPanel h2 { color: #369; font-size: 15px; } #detailPanel p { margin-bottom: 5px; }');

var divEl = Ext.get('hmsiosstandardsDiv');
var xPos = divEl.getX();
var yPos = divEl.getY();

var footerEl = Ext.get('footer');
var footerHeight = footerEl.getHeight();

var r = Ext.data.Record.create([
{name: 'Platform'},
{name: 'Model'},
{name: 'IOS'},
{name: 'Status'},
{name: 'CheckinDate', type: 'date', dateFormat: 'Y-m-j'},
{name: 'RetireDate', type: 'date', dateFormat: 'Y-m-j'},
{name: 'Advisory'},
{name: 'Notes'}

]);

var xmlReader = new Ext.data.XmlReader({
record: "Row",
}, r);

var panel = new Ext.Panel({
renderTo: divEl,
title: 'IOS Standards',
closable: false,
draggable: false,
resizable: false,
width : Ext.lib.Dom.getViewWidth()- xPos - 25,
height : Ext.lib.Dom.getViewHeight() - (footerHeight * 2) - yPos - 25,
constrain: true,
layout: 'border',
tbar: new Ext.Toolbar({
items: [
{ text: 'Expand All',
handler: function(btn) {
Ext.getCmp('gridPanel').getView().expandAllGroups();
}
},
{ text: 'Collapse All',
handler: function(btn) {
Ext.getCmp('gridPanel').getView().collapseAllGroups();
}
},
{ text: 'Group by Platform',
handler: function(btn) {
Ext.getCmp('gridPanel').getStore().groupBy('platform');
}
},
{ text: 'Group by Status',
handler: function(btn) {
Ext.getCmp('gridPanel').getStore().groupBy('status');
}
},
{ text: 'Group by IOS',
handler: function(btn) {
Ext.getCmp('gridPanel').getStore().groupBy('ios');
}
}
]
}),
items: [
new Ext.grid.GridPanel({
id: 'gridPanel',
store: new Ext.data.GroupingStore({
reader: xmlReader,
url: 'iosData.xml',
sortInfo:{field: 'Model', direction: "ASC"},
groupField:'Platform'
}),
columns: [
{header: "Platform", width: 20, sortable: true, dataIndex: 'Platform'},
{header: "Model", width: 20, sortable: true, dataIndex: 'Model'},
{header: "IOS", width: 20, sortable: true, dataIndex: 'IOS'},
{header: "Status", width: 20, sortable: true, dataIndex: 'Status'},
{header: "Checkin Date", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-j'), dataIndex: 'CheckinDate'},
{header: "Retire Date", width: 20, sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-j'), dataIndex: 'RetireDate'},
{header: "Advisory", width: 20, sortable: true, dataIndex: 'Advisory'},
],
view: new Ext.grid.GroupingView({
id: 'groupingView',
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
frame: false,
region: 'center'
}),
new Ext.Panel({
id: 'detailPanel',
title: 'Detail',
height: 150,
split: true,
region: 'south',
collapsible: true
})
]
});

var defaultText = '<big>Select a model to view details...</big>';

var template = new Ext.Template(
'<h3>Platform: {platform}</h3>',
'<h3>Model: {model}</h3>',
'<h3>Notes: {notes}</h3>'
);

Ext.getCmp('gridPanel').getSelectionModel().on('rowselect', function(sm, ri, record) {
var el = Ext.getCmp('detailPanel').body;
template.overwrite(el, record.data);
});

panel.render();

window.onresize = function() {
panel.setSize(Ext.lib.Dom.getViewWidth()- xPos - 25, Ext.lib.Dom.getViewHeight() - (footerHeight * 2) - yPos -25);
};
});
Based upon the code above, does anyone have any ideas as to why this code doesn't work? Additionally, I'm switching from JSON data which does work in virtually the exact same code to XML data based upon end user requirements.

Thanks for any input or suggestions.

Steve E.