PDA

View Full Version : Accessing XML Data



glafrance
11 Jul 2012, 5:31 PM
I almost have this working. I can access attributes in the XML data, but not the data in the Privilege element.

BTW, ignore the UI, I'm just trying to console log the data at this point.

---------- sampledata.xml --------


<PrivilegeUIConfig>
<Module name="profile">
<UIComp id="manageLink" operator="test" description="" >
<Privilege>View</Privilege>
<Privilege>Edit</Privilege>
<Privilege>Delete</Privilege>
<Privilege>Publish</Privilege>
</UIComp>
<UIComp id="shareLink" operator="test">
<Privilege>Share</Privilege>
</UIComp>
<UIComp id="createContainer" operator="test">
<Privilege>View</Privilege>
</UIComp>
</Module>
<Module name="reports">
<UIComp id="viewProfile" operator="test" description="Sample description" >
<Privilege>View</Privilege>
</UIComp>
</Module>
</PrivilegeUIConfig>
---------------- Application Code ----------------

Ext.Loader.setConfig({
enabled : true,
paths: {
'Ext': '/extjs4/src',
}
});
Ext.onReady(function(){
console.log('The DOM is ready.');
Ext.define('Module', {
extend : 'Ext.data.Model',
fields : [
{ name : 'name', type : 'string', mapping : '@name' }
],
hasMany : {
model: 'UIComp',
name: 'getUIComp',
associationKey : 'uicomp',
reader: 'uicompreader'
}
});

Ext.define('UIComp', {
extend : 'Ext.data.Model',
fields : [
{ name : 'id', type : 'string', mapping : '@id' },
{ name : 'operator', type : 'string', mapping : '@operator' },
{ name : 'description', type : 'string', mapping : '@description' }
],
belongsTo : 'Module',
hasMany : {
model: 'Privilege',
name: 'getPrivilege',
associationKey : 'privilege',
reader: 'privilegereader'}
});
Ext.define('Privilege', {
extend : 'Ext.data.Model',
fields : [
{ name : 'privilege', type : 'string', mapping : 'Privilege' }
],
belongsTo : 'UIComp'
});
Ext.define('PrivilegeReader', {
extend : 'Ext.data.reader.Xml',
alias : 'reader.privilegereader',
record : 'Privilege',
root : 'UIComp'
});
Ext.define('UICompReader', {
extend : 'Ext.data.reader.Xml',
alias : 'reader.uicompreader',
record : 'UIComp',
root: 'Module',
getAssociatedDataRoot:function(data, associationName) {
if(associationName == 'privilege')
return data;
else
return this.callParent(arguments);
}
});
Ext.define('ModuleReader', {
extend : 'Ext.data.reader.Xml',
alias : 'reader.modulereader',
record : 'Module',
root: 'PrivilegeUIConfig',
getAssociatedDataRoot:function(data, associationName) {
if(associationName == 'uicomp')
return data;
else
return this.callParent(arguments);
}
});
store = Ext.create('Ext.data.Store', {
model : 'Module',
proxy: {
type: 'ajax',
url : 'privilegeUIConfig.xml',
method: 'GET',
reader: {
type: 'modulereader',
root: 'PrivilegeUIConfig',
record : 'Module'
}
},
autoLoad : false
});

store.load(function(store, records, successful){
if(successful){
console.log('Call to get the data succeeded.');
this.each(function(){
console.log('Module name: ' + this.get('name'));
console.log(this.getUIComp());
this.getUIComp().each(function(){
console.log('UIComp id: ' + this.get('id'));
console.log(this.getPrivilege());
this.getPrivilege().each(function(){
console.log('Privilege: ' + this.get('privilege'));
});
});
});
//Ext.ComponentManager.get('rawCodeTA').setValue(this);
}else{
console.log('Call to get the data failed.');
}
});

Ext.create('Ext.container.Viewport', {
title: 'Mastering XML Parsing in ExtJS',
layout: {
type: 'hbox',
align: 'stretch',
},
items: [
{
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'textfield',
value: 'Raw data returned from the AJAX call:',
fieldStyle:"border:none; font-size: 20px",
height: 40
},
{
xtype: 'textarea',
id: 'rawCodeTA', // do not use id, use itemId instead
flex: 1
}
]
},
{
xtype: 'textarea',
id: 'dummy',
flex: 1
}
]
});
});