PDA

View Full Version : read simple xml into Sencha



bia
19 Nov 2012, 4:46 AM
I have an xml [ created using an editor - Ext.ux.ImageMap and saved using ajax from Ext.ux.ImageMap ]

<areas><area shape="rect" coords="130,195,256,320" alt="test" href="http://www.yahoo.com" target="_blank"/><area shape="rect" coords="333,371,467,484" alt="test" href="http://www.google.com"/></areas>

and I want to read this xml file from sencha and to draw a rectangle for each area created in the editor.
Maybe to draw a area tag ?


I do not know if I need a store fore this.
And if I need a store I must transform the xml into json format for sencha?
I am new in Sencha so I do not know what is the first step in this.
Thanks in advance, Bianca

mitchellsimoens
22 Nov 2012, 6:02 AM
You don't have to use a Store and certainly not have to use JSON. IF you load it via an Ajax request, the xml is just it's own document so it's all dom elements that you can traverse and get properties.

bia
22 Nov 2012, 7:53 AM
Ext.Ajax.request({
url: 'http://test.abc.net/imagemap/imgmap/page.xml',
callback: function(response) {
console.log(response.responseText);
}
});

In console appears "undefined" in this line console.log(response.responseText);
If I add to the xml file <?xml version="1.0" encoding="UTF-8"?>
I have the same "undefined" value for the response



In more yesterday I changed the xml 'format' from attributes to nodes because I read that Sencha can not read attributes, only values ....
So
[I]<areas>
<area shape="rect" coords="130,195,256,320" alt="test" href="http://www.abc.com" target="_blank"/>
<area shape="rect" coords="333,371,467,484" alt="test" href="http://www.abc.com"/>
</areas>

became

<areas>
<area>
<shape>rect</shape>
<coords>130,195,256,320</coords>
<alt>test</alt>
<href>http://www.abc.com</href>
<target>_blank</target></area>
<area>
<shape>rect</shape>
<coords>333,371,467,484</coords>
<alt>test</alt>
<href>http://www.abc.com</href>
<target></target>
</area>
</areas>

I made a Model
Ext.setup({
onReady: function() {
Ext.regModel('Area', {
fields: [
{name: 'shape', type: 'string' },
{name: 'coords', type: 'string' },
{name: 'alt', type: 'string' },
{name: 'title', type: 'string' },
{name: 'href', type: 'string' } ,
{name: 'target', type: 'string'}
]
});

Then a store to load areas:
var store = new Ext.data.Store({
model: 'Area',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'http://test.abc.net/imagemap/imgmap/xml2json/xml2json_test.php?xmlFile=/home/abc/imagemap/imgmap/page.xml',
reader: {
type: 'json',
root: 'areas'
}
}
});

and a form a combo box to see what was loaded

var form;
var formBase = {
scroll:'vertical',
items: [{
xtype: 'selectfield',
name : 'area',
label: 'Area',
store: store,
valueField: 'shape',
displayField: 'shape'
}]
};
if (Ext.is.Phone) {
formBase.fullscreen = true;
} else {
Ext.apply(formBase, {
autoRender: true,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: false,
height: 385,
width: 480
});
}
form = new Ext.form.FormPanel(formBase);
form.show();

but nothing is loaded in the combo box ....
How can I display the content of the store? How to debug?

I need to draw this areas on each page for a magazine.
The Pages module is already created. [not by me]
I must find a way to read the xml file for each page.

Thanks in advance.