Loading a grid from an XML string instead of file

[diulei]

Hi there - first post for me. I'm very glad that I stumbled across Ext JS because this is absolutely amazing.

I've been playing around with some of the examples and reading docs for quite a few days and I can't seem to figure out how to load XML from a local variable (string) rather than an XML file in order to convert it into a grid (even though this sounds like an extremely simple noob problem).

I've been able to get the grid working from a table and external XML file thanks to the examples.

So far I only have what I've seen in the examples mashed together. Here I have what the example showed:



var dataStore = new Ext.data.Store({

proxy: new Ext.data.HttpProxy({url: 'items.xml'}),

reader: new Ext.data.XmlReader({
record: 'Item',
id: 'ItemID'
}, [
'ItemCount', 'ItemID', 'ItemDescription', 'AvgRating'
])
});



var colModel = new Ext.grid.ColumnModel([
{header: "Clue Count", width: 100, dataIndex: 'ItemCount'},
{header: "Tag GUID", width: 250, dataIndex: 'ItemID'},
{header: "Tag Description", width: 155, dataIndex: 'ItemDescription'},
{header: "Average Rating", width: 100, dataIndex: 'AvgRating'}


//etc etc.

]);

What I would like to do instead is populate this grid from a string variable in instead.

I am assuming the pseudo-code would be:

1. get the local variable that contains the string (i.e. var strXML = "<etc etc>")
2. Parse this string into an XML object
3. Create a Ext.data.Store object using the XML string/object as a parameter

but unfortunately I just have no idea where to go / what objects or functions to use.

Any suggestions or pointers greatly appreciated!

[tryanDLS]

There's no builtin way to handle all of this. There are numerous examples on web of cross-browser ways to load a string into an xml doc. You could then pass that to store.loadData instead of store.load. The store and xmlReader code is straightforward - you should be able to step thru that to understand how the flow would be different than a normal load via proxy.

[diulei]

Thanks for the quick reply - I'll give it a shot!

[diulei]

Got it working! Not sure if it's ideal, but it's progress nonetheless. It was very simple. I am posting it below in case anyone is interested (though I think most people will be loading their XML from external files and not local variables):

EDIT: Now working & tested in IE7 and FF2.



//load XML as string
var strXML = "<Tags>.........</Tags>";
var xmlObject;


//load XML string code for IE
if (window.ActiveXObject)
{
var doc=new ActiveXObject("Microsoft.XMLDOM");
doc.async="false";
doc.loadXML(strXML);
}
//load XML string code for Mozilla, Firefox, Opera, etc.
else
{
var parser=new DOMParser();
var doc=parser.parseFromString(strXML,"text/xml");
}

xmlObject = doc.documentElement;

//...

var dataStore = new Ext.data.Store({

proxy: new Ext.data.MemoryProxy(xmlObject),

reader: new Ext.data.XmlReader({
record: 'Item',
id: 'ItemID'
}, [
'Cat1', 'Cat2', 'Cat3', 'Cat4'
])
});

//etc. etc.Thanks again for the reply - no way I would have figured this out if it weren't for that.

[Animal]

Why are you doing that? If you are concatenating up XML strings to encapsulate data that you already have in javascript, then why not just use an ArrayReader, or JsonReader and just read the data directly?

[DigitalSkyline]

As animal says you should really check in to using Json if your not familar with it check the pinned threads (this one especially: http://extjs.com/forum/showthread.php?t=441 ). It's quite easy to pick up and has less overhead then xml.

[diulei]

Why are you doing that? If you are concatenating up XML strings to encapsulate data that you already have in javascript, then why not just use an ArrayReader, or JsonReader and just read the data directly?

Your concerns are valid - I'm working on a project in which I needed to explore all my options. One of the case scenarios was that an XML string would defined/injected into a page as it loads. I've already successfully made a grid using an external file, as well as one using ArrayReader. The "XML as a string" option I wanted to keep open is something like a backup (kind of keep it as proof of concept).

[kell]

I for one have found this to be very helpful. I am creating a page that makes an Ajax call to a webservice that responds with an XML string. This was exactly what I needed to convert the XML string into a document that could be consumed by the MemoryProxy. I would prefer the webservice return a json object, but it doesn't.
diulei - Thanks

[Animal]

If you make an Ajax request that recieves a valid XML document, you can just get that document straight out of the Ajax response:



myResponse.responseXml


http://www.w3.org/TR/XMLHttpRequest/#dfn-responsexml

No need to extract it as a string and parse it!

[diulei]

I'd agree with Animal - if the webservice you are calling returns an XML file, it's probably best to use that as an object directly rather than from a string string. My case was just a little weird and out of ordinary... B)

[jg4smile]

If you have a XML string from your server side code (e.g. .NET XML island, or a CF web service) the function could come in handy. Thx, diulei.

JG4

"solutions only"

[migo_config]

Im having the hardest time getting this to work ... I am returning an XmlDocument from a C#/ASP.NET web service.

If I open the service by browsing to it in IE I get well formed XML when I alert data.raw.xml I can see the xml I've tried just passing the data to MemoryProxy I've tried passing doc.documentElement I've tried the sample above and I always receive the same error "documentElement" is null or not an object Line 98.

if I alert doc.documentElement after loadXML it returns an object when I alert the items.length I get a proper value.....We only support IE on this project so have not attempted debug in Firebug but it appears to me as though the documentElement does exist.

any ideas? probably missing something basic


function LoadTable(data)
{
alert(data.raw.xml);
var doc = new ActiveXObject("Microsoft.XMLDOM");
doc.async = "false";
doc.loadXML(data.raw.xml);
xmlObject = doc.documentElement;
var items = doc.getElementsByTagName("Table");
alert(items.length);
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(xmlObject),
reader: new Ext.data.XmlReader({
record: 'Table',
id: 'id'

}, [
{name: 'Number', mapping: 'number'}

])
});

ds.loadData();


Sample XML/Soap Response


<soap:Envelope xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<soap:Body>
<GetItemsResponse xmlns="http://local/services/feed">
<GetItemsResult>
<NewDataSet xmlns="">
<Table>
<id>45-3425342-5345-235</id>
<Number>1111111</Number>........

[sinha]

migo_config, were you able to resolve this? I am having the same problem.