Анализ вложенных XML в sencha touch 2

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> 

Как получить изображение imageurl соответствующих домов из вышеуказанного XML в sencha touch 2 и показать их в карусели, когда я нажму соответствующий дом. в настоящее время я показываю дома в виде списка. и я должен добавить план этажа к той же карусели

Answer 1

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> 

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, чтобы получить значение image узла в XML. Если предположить, что текст является 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

Я никогда не пробовал 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. Floorplan

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

Список Выход

Консоль вывода, когда я щелкните элемент в списке