Javascript 解析sencha touch 2中的嵌套XML XXXXX ..... ...... ...... ...... ..... ..... XXXXX ..... ...... ...... ...... ..... .....

如何从sencha touch 2中的上述XML中获取相应主页的store imageurl，并在单击相应主页时在旋转木马中显示它们。目前我正在列表视图中显示房屋。我必须将楼层平面图附加到同一个旋转木马中

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

模型和存储：

<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>

然后加载存储，并使用

record.raw.childNodes[0].nodeValue来访问图像名称，以获取xml中
image
节点的值。假设文本是图像的URL，则可以将旋转木马项目的
html
设置为
img
标记，该值为
src
：

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

store.load（函数（记录）{
var项目=[]，
i、 len=记录长度；
对于（i=0；i我从未在sencha touch中尝试过xml解析，但我今天为您尝试了..我得到了您想要的

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

XML

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

2.图像

<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>

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

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.平面布置图

<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>

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

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

商店

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

列表输出

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


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

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

如果xml文档是这样的。如何定义模型？我们没有
家庭1
图1
图2
图3
图4
我更改了我的问题。当我单击主页时，我需要获取相应的图像和楼层平面图。当前我正在列表视图中显示它让我知道..我的回答有帮助或没有帮助我只在它上面工作给我一个不同的url，它不在当前节点中我只获取第二组图像，而不是第一组图像