XML into Grid?

[waldav00]

Hi,

I am trying to use an agent to send XML data to my grid. No data ever displays though so I am not sure what is wrong. Here is my code in the onLoad event of the form and in the called agent:

onLoad event code:


var mySOPstore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({url: '(testsop2)?openAgent'}),
reader: new Ext.data.XmlReader({
record: 'record',
id: 'recordID',
totalRecords: 'totalDocs'
}, ['category','title','id',
{name: 'version', type: 'float'},
{name: 'releaseDate', type: 'date', dateFormat: 'n/j/Y'},
'status','location','createCR','package','jobAid','form','processFlow','checklist','procedureRef']),
baseParams : {sortColumn: 0, sortDir: 'asc'}
});
var allSOPstore = mySOPstore;
var subSOPstore = mySOPstore;
var mySOPexpander = new Ext.grid.RowExpander({
tpl : new Ext.Template('{jobAid},{form},{processFlow},{checklist},{procedureRef}'),
getBodyContent: getRowContent
});


var allSOPexpander = new Ext.grid.RowExpander({
tpl : new Ext.Template('{jobAid},{form},{processFlow},{checklist},{procedureRef}'),
getBodyContent: getRowContent
});
var subSOPexpander = new Ext.grid.RowExpander({
tpl : new Ext.Template('{jobAid},{form},{processFlow},{checklist},{procedureRef}'),
getBodyContent: getRowContent
});
var mySOPcm = new Ext.grid.ColumnModel([
mySOPexpander,
{header: "Category", width: 100, resizable: false, dataIndex: 'category'},
{header: "SOP Title", width: 220, resizable: false, css: "white-space: normal !important;", renderer: renderTitle, dataIndex: 'title'},
{header: "ID", width: 180, resizable: false, renderer: renderID, dataIndex: 'id'},
{header: "Version", width: 65, resizable: false, dataIndex: 'version'},
{header: "Release Date", width: 105, renderer: Ext.util.Format.dateRenderer('Y/m/d'), resizable: false, dataIndex: 'releaseDate'},
{header: "Status", width: 60, resizable: false, dataIndex: 'status'},
{header: "Location", width: 75, resizable: false, dataIndex: 'location'},
{header: "Change Requests", width: 120, sortable: false, resizable: false, css: "padding: 0; border: 0; margin: 0", renderer: renderCR, id: 'chgRequestsCol', dataIndex: 'createCR'},
{header: "", width: 27, sortable: false, resizable: false, renderer: renderPkg, id: 'pkgGridHeader', dataIndex: 'package'}
]);
var allSOPcm = new Ext.grid.ColumnModel([
allSOPexpander,
{header: "Category", width: 100, resizable: false, dataIndex: 'category'},
{header: "SOP Title", width: 220, resizable: false, css: "white-space: normal !important;", renderer: renderTitle, dataIndex: 'title'},
{header: "ID", width: 180, resizable: false, renderer: renderID, dataIndex: 'id'},
{header: "Version", width: 65, resizable: false, dataIndex: 'version'},
{header: "Release Date", width: 105, renderer: Ext.util.Format.dateRenderer('Y/m/d'), resizable: false, dataIndex: 'releaseDate'},
{header: "Status", width: 60, resizable: false, dataIndex: 'status'},
{header: "Location", width: 75, resizable: false, dataIndex: 'location'},
{header: "Change Requests", width: 120, sortable: false, resizable: false, css: "padding: 0; border: 0; margin: 0", renderer: renderCR, id: 'chgRequestsCol', dataIndex: 'createCR'},
{header: "", width: 27, sortable: false, resizable: false, renderer: renderPkg, id: 'pkgGridHeader', dataIndex: 'package'}
]);

var subSOPcm = new Ext.grid.ColumnModel([
subSOPexpander,
{header: "Category", width: 100, resizable: false, dataIndex: 'category'},
{header: "SOP Title", width: 220, resizable: false, css: "white-space: normal !important;", renderer: renderTitle, dataIndex: 'title'},
{header: "ID", width: 180, resizable: false, renderer: renderID, dataIndex: 'id'},
{header: "Version", width: 65, resizable: false, dataIndex: 'version'},
{header: "Release Date", width: 105, renderer: Ext.util.Format.dateRenderer('Y/m/d'), resizable: false, dataIndex: 'releaseDate'},
{header: "Status", width: 60, resizable: false, dataIndex: 'status'},
{header: "Location", width: 75, resizable: false, dataIndex: 'location'},
{header: "Change Requests", width: 120, sortable: false, resizable: false, css: "padding: 0; border: 0; margin: 0", renderer: renderCR, id: 'chgRequestsCol', dataIndex: 'createCR'},
{header: "", width: 27, sortable: false, resizable: false, renderer: renderPkg, id: 'pkgGridHeader', dataIndex: 'package'}
]);
mySOPcm.defaultSortable = true;
allSOPcm.defaultSortable = true;
subSOPcm.defaultSortable = true;
var myGrid = new Ext.grid.GridPanel({
el:'sops',
height: 520,
width: 998,
disableSelection: true,
frame:false,
border:false,
stripeRows:true,
enableHdMenu:false,
enableColumnMove:false,
store: mySOPstore,
cm: mySOPcm,
trackMouseOver:true,
viewConfig: {
forceFit:true
}
});
myGrid.render();
var allGrid = myGrid.cloneConfig({
el:'allSOPs',
cm: allSOPcm,
plugins: allSOPexpander,
store: allSOPstore
});

var subGrid = myGrid.cloneConfig({
el:'subSOPs',
cm: subSOPcm,
plugins: subSOPexpander,
store: subSOPstore
});
var mainTabs = new Ext.TabPanel({
renderTo: 'mainPanel',
width: 998,
activeTab: 0,
bodyBorder: false,
plain: true,
border: false,
frame: false,
defaults: { autoHeight: true },
items:[
{id:'myPanel', contentEl:'sops', title: 'My SOPs'},
{id:'allPanel', contentEl:'allSOPs', title: 'All SOPs'},
{id:'subPanel', contentEl:'subSOPs', title: 'Substitution SOPs'}
]
});

mainTabs.getComponent('allPanel').on('activate', function() {
if (!allGrid.rendered) {
allSOPstore.load();
allGrid.render();
}
});
mainTabs.getComponent('subPanel').on('activate', function() {
if (!subGrid.rendered) {
subSOPstore.load();
subGrid.render();
}
});

Ext.get('toggleInfo').on('click', toggleDetails);


testsop2 agent code:

Sub Initialize
Print {<?xml version="1.0" encoding="ISO-8859-1" ?>}
Print "<data>"
Print "<record>"

Print "<recordID>1</recordID>"
Print "<id>TDBU -T&amp;D-MEQ-0001-SOP</id>"
Print "<category>Operations</category>"
Print "<title>Straighten Poles in the Alive State</title>"
Print "<version>1.3</version>"
Print "<releaseDate>2/23/2006</releaseDate>"
Print "<status>active</status>"
Print "<location>office</location>"
Print "<createCR>#7</createCR>"
Print "<package>gold</package>"
Print "<jobAid>"
Print "<aidID>#1</aidID>"
Print "<aidTitle>How to change bulbs</aidTitle>"
Print "<aidID>#2</aidID>"
Print "<aidTitle>How to plug a power cord</aidTitle>"
Print "<aidID>#3</aidID>"
Print "<aidTitle>Avoiding short circuits</aidTitle>"
Print "</jobAid>"
Print "<form>"
Print "<formID>#1</formID>"
Print "<formTitle>Bulb-changing form</formTitle>"
Print "<formID>#2</formID>"
Print "<formTitle>Cord-pluggin form</formTitle>"
Print "</form>"
Print "<processFlow>"
Print "<processID>#1</processID>"
Print "<processTitle>Process One</processTitle>"
Print "<processID>#2</processID>"
Print "<processTitle>Process Two</processTitle>"
Print "</processFlow>"
Print "<checklist>"
Print "<checklistID>#1</checklistID>"
Print "<checklistTitle>Types of Bulbs</checklistTitle>"
Print "<checklistID>#2</checklistID>"
Print "<checklistTitle>Types of cords</checklistTitle>"
Print "</checklist >"
Print "<procedureRef>"
Print "<procedureID>#1</procedureID>"
Print "<procedureTitle>Procedure One</procedureTitle>"
Print "<procedureID>#2</procedureID>"
Print "<procedureTitle>Procedure Two</procedureTitle>"
Print "</procedureRef>"
Print "</record>"
Print "<totalDocs>1</totalDocs>"
Print "</data>"
End Sub

I get no errors and the page seems to load fine but this is what I get in the grid, nothing, rather than the 1 record I was expecting. Anyone have any ideas what I've done wrong?

[RWaters]

I don't see anywhere in your code where you are actually telling the store's to load. You must call mySOPstore.load() at some point in your code.

A good way to check is to open up firebug and make sure that the Ajax requests are actually getting fired when the grids are rendering.

[waldav00]

I added mySOPstore.load() to the end of my onLoad event and still nothing, no data but also the grids themselves don't have the toolbars with the paging, refresh, etc. I don't understand what I'm doing wrong.

[waldav00]

I added a loadexception event which fires when I try to call the load() method but there is nothing in the error object which is completely useless to me. I don't know what else to check.