Question

I am using ExtJS with an XMLReader to display content in a GridPanel. This works fine, however my XML source has an unpredictable number of repeated elements:

<beamline> 
  <technique>Tomography</technique> 
  <technique>Phase contrast imaging</technique> 
  <technique>Microdiffraction</technique> 
  <technique>General diffraction</technique> 
</beamline>

There could be anywhere from 0-30 <technique> elements.

Currently I’m pulling these out manually in the XMLReader using the :nth(n) option:

{name: 'technique1', mapping: 'technique:nth(1)'},
{name: 'technique2', mapping: 'technique:nth(2)'},

and then placing these in the panel as columns and concatenating with a renderer function:

{header: "Technique", width: 100, dataIndex: 'technique1', sortable: false, renderer: techniques},
{header: "Technique2", dataIndex: 'discipline2', hidden: true},

function techniques(val, x, store){
  return '<ul><li>'+val+'</li><li>'+store.data.technique2+'</li></ul>';
}

but this is obviously too clunky to scale. Is there a generic (loop or XPath-style) method to achieve a similar result?

Answer 1

I’ve not used the XML reader but I had a similar problem where I had to display a row where a column could contain N items.

Assuming the techniques column contains an array of objects you could render it as

function techniquesRenderer(val){
   var returnValue = '<ul>';
   for(var v in val){
     var foo = val[v];
     returnValue += '<li>' + foo.someProperty + '</li>';
   }
   return returnValue += '</ul>
}

Hope this helps.