Results 1 to 3 of 3

Thread: read simple xml into Sencha

  1. #1
    Sencha User
    Join Date
    Oct 2012
    Vote Rating

    Default read simple xml into Sencha

    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="" target="_blank"/><area shape="rect" coords="333,371,467,484" alt="test" href=""/></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

  2. #2
    Sencha User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    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.
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:

  3. #3
    Sencha User
    Join Date
    Oct 2012
    Vote Rating

    Default I try what you told me....

    url: '',
    callback: function(response) {

    In console [in Chrome] 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 ....
    <area shape="rect" coords="130,195,256,320" alt="test" href="" target="_blank"/>
    <area shape="rect" coords="333,371,467,484" alt="test" href=""/>



    I made a Model
    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{
    model: 'Area',
    autoLoad: true,
    proxy: {
    type: 'ajax',
    url : '',
    reader: {
    type: 'json',
    root: 'areas'

    and a form a combo box to see what was loaded

    var form;
    var formBase = {
    items: [{
    xtype: 'selectfield',
    name : 'area',
    label: 'Area',
    store: store,
    valueField: 'shape',
    displayField: 'shape'
    if ( {
    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);;

    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts