在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获取相应家庭的商店图像，并在我点击相应的家时在旋转木马中显示它们。目前我正在列表视图中显示房屋。我必须将平面图附加到同一个转盘上

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'
        }
    }
});

然后加载商店，并使用record.raw.childNodes[0].nodeValue访问图像名称以获取xml中image节点的值。假设文字是图片的网址，则可以将轮播项目的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>