PDA

View Full Version : record2markup and record2xml



Bryan
27 Mar 2008, 10:04 AM
I was playing around with FusionCharts and realized I needed to get the data from an Ext.data.Store into a specifically formatted XML format to send as input to FusionCharts. The following code adds two methods to Ext.data.Record: asMarkup, and asXml.

Ext.data.Record.asMarkup takes an optional XTemplate as input. It outputs the record using the XTemplate's formatting. If no template is provided it will generate XML output for you. (XML output provided by: http://extjs.com/forum/showthread.php?t=6529)

Ext.data.Record.asXML is a shortcut function for asMarkup without a specified template.



Ext.override(Ext.data.Record, {
/**
* returns an Ext.data.Record using the supplied Ext.XTemplate,
* or XML Markup if no XTemplate is provided.
*/
asMarkup : function(tpl) {
var r = this.store.reader.meta;
var elName = r.record;
if (tpl){
if(typeof tpl == "string"){
tpl = new Ext.XTemplate(tpl);
}
return tpl.applyTemplate(this.data);
} else {
/**
* From the 1.x forums.. I think it is still applicable
* http://extjs.com/forum/showthread.php?t=6529
*/
var result = "<" + elName + " id=\"" + this.id + "\">";
this.fields.each(function(f) {
result += "<" + f.name;
if (f.type && f.type !== "auto") {
result += " type=\"" + f.type + "\"";
}
result += ">" + this.get(f.name) + "</" + f.name + ">";
}, this);
return result + "</" + elName + ">";
}
},

/**
* alias for asMarkup
*/
asXml : function(){
return this.asMarkup();
}
});

Bryan
27 Mar 2008, 10:05 AM
Using the XML Grid example, here's how to use these changes:



/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.onReady(function(){

// create the Data Store
var store = new Ext.data.Store({
// load using HTTP
url: 'sheldon.xml',

// the return will be XML, so lets set up a reader
reader: new Ext.data.XmlReader({
// records will have an "Item" tag
record: 'Item',
id: 'ASIN',
totalRecords: '@total'
}, [
// set up the fields mapping into the xml doc
// The first needs mapping, the others are very basic
{name: 'Author', mapping: 'ItemAttributes > Author'},
'Title', 'Manufacturer', 'ProductGroup'
])
});

// create the grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Author", width: 120, dataIndex: 'Author', sortable: true},
{header: "Title", width: 180, dataIndex: 'Title', sortable: true},
{header: "Manufacturer", width: 115, dataIndex: 'Manufacturer', sortable: true},
{header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
],
tbar:[{
text:'Show Default XML',
handler:function(){
var record = store.getAt(0);
alert('Record 0 as XML\n\n'+ record.asXml());
}
},{
text:'Show Template',
handler:function(){
var tmpl = new Ext.XTemplate(
'<p>{Author}</p>',
'<p>{Title}</p>',
'<p>{Manufacturer}</p>',
'<p>{ProductGroup}</p>'
);
var record = store.getAt(0);
alert('Record 0 using Ext.XTemplate\n\n'+record.asMarkup(tmpl));
}
}],
renderTo:'example-grid',
width:540,
height:200
});

store.load();
});