javascript - 在 sencha touch 2 中解析嵌套的 XML

Question

<homes>
<home>
<id>XXXXXx</id>
<images>
<image id="1"> .....</image>
<image id="2"> ......</image>
<image id="3"> ...... </image>
<image id="4"> ......</image>
</images>
<floorplans>
<floorplan id="1"> ..... </floorplan>
<floorplan id="2"> ..... </floorplan>
</floorplans>
</home>
<home>
<id>XXXXXx</id>
<images>
<image id="1"> .....</image>
<image id="2"> ......</image>
<image id="3"> ...... </image>
<image id="4"> ......</image>
</images>
<floorplans>
<floorplan id="1"> ..... </floorplan>
<floorplan id="2"> ..... </floorplan>
</floorplans>
</home>
</homes>

如何在 sencha touch 2 中从上述 XML 中获取相应房屋的商店 imageurl 并在我单击相应房屋时在轮播中显示它们。目前正在列表视图中显示房屋。我必须将平面图附加到同一个轮播

Answer 1

我从来没有在 sencha touch 中尝试过 xml 解析，但我今天为你尝试过.. 我得到了你想要的

解析我使用模型关联提出的完整 xml

XML

<homes>
<home>
<id>home1</id>
<images>
<image id="1"> image1</image>
<image id="2"> image2</image>
<image id="3"> image3 </image>
<image id="4"> image4</image>
</images>
<floorplans>
<floorplan id="1"> floorplan1 </floorplan>
<floorplan id="2"> floorplan2 </floorplan>
</floorplans>
</home>
<home>
<id>home2</id>
<images>
    <image id="1"> image1</image>
    <image id="2"> image2</image>
    <image id="3"> image3 </image>
    <image id="4"> image4</image>
</images>
<floorplans>
    <floorplan id="1"> floorplan1 </floorplan>
    <floorplan id="2"> floorplan2 </floorplan>
</floorplans>
</home>
</homes>

楷模

1.首页

Ext.define('MyApp.model.Home', {
    extend: 'Ext.data.Model',  
    config: {
        fields: [
            {name : 'id',  type: 'string'}
        ],
        associations: [ {
            type: 'hasMany',
            model: 'MyApp.model.Floorplan',
            associationKey: 'floorplans'
        },{
            type: 'hasMany',
            model: 'MyApp.model.Image',
            associationKey: 'images'
        }]
    }
});

2. 图片

Ext.define('MyApp.model.Image', {
    extend: 'Ext.data.Model',  
    config: {
        fields: [
            {name : 'id', mapping :'@id'},
            {name: 'image', mapping:  function (node) {
                return (node.firstChild ? node.firstChild.nodeValue : null);
            }}
        ],
        proxy : {
            reader: {type: 'xml', record: 'image'}
        },
            belongsTo: 'MyApp.model.home'
    }
});

3. 平面图

Ext.define('MyApp.model.Floorplan', {
    extend: 'Ext.data.Model',  
    config: {
        fields: [
            {name : 'id', mapping :'@id'},
            {name : 'floorplan',   mapping:  function (node) {
                return (node.firstChild ? node.firstChild.nodeValue : null);
            }}
        ],
        proxy : {
            reader: {type: 'xml', record: 'floorplan'}
        },
        belongsTo: 'MyApp.model.home'
    }
});

店铺

Ext.define('MyApp.store.home', {
    extend: 'Ext.data.Store',
    config: {
        model: "MyApp.model.Home",
        storeId : 'home',
        proxy: {
                type: 'ajax',
                url : 'homes.xml',
                reader: {
                    type: 'xml',
                    record: 'home',
                    rootProperty: 'homes'
                }
        },
        autoLoad : true
    }
});

列表

Ext.define('MyApp.view.homesList', {
    extend: 'Ext.List',
    xtype: 'homeList',   
    config: {
        itemTpl: '{id}',
        store: 'home',
        listeners : {
            itemtap: function( me, index, target, record, e, eOpts ){
              // record.images() and record.floorplans() gives respective stores

             // list of images for this record 
                console.log(record.images().getData());

            // list of floorplans for this record
                console.log(record.floorplans().getData());

          // you got what you want, so you can paint carousel using above data
            }
        }
    }
});

列表输出

单击列表中的项目时的控制台输出

Answer 2

您应该能够使用 XML 代理定义模型和存储，然后加载记录并从中创建轮播。

型号及店铺：

Ext.define('Images', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'image', type: 'string' }
        ]
    }
});

var store = Ext.create('Ext.data.Store', {
    model: 'Images',
    id: 'Test',
    proxy: {
        type: 'ajax',
        url : 'homes.xml',
        reader: {
            type: 'xml',
            record: 'image',
            rootProperty: 'images'
        }
    }
});

然后加载存储，并访问图像名称 usingrecord.raw.childNodes[0].nodeValue以获取imagexml 中节点的值。假设 text 是图像的 URL，然后您可以html将轮播项目的设置为img具有该值的标记src：

store.load(function(records) {
    var items = [],
        i, len = records.length;
    for (i=0; i<len; i++)
    {
        items.push({
            html: '<img src="' + records[i].raw.childNodes[0].nodeValue + '" />'
        })
    }

    Ext.create('Ext.Carousel', {
        fullscreen: true,

        defaults: {
            styleHtmlContent: true
        },

        items: items
    });
});

Answer 3

if xml doc is like this .how to define the model ? we do not have <images>

    <homes>
<home>
<id>home1</id>
<image id="1"> image1</image>
<image id="2"> image2</image>
<image id="3"> image3 </image>
<image id="4"> image4</image>
</home>
</homes>