Extjs XTemplate не отображается должным образом

Question

Привет Я создаю поиск flickr с использованием API ExtJs и Flickr. Получив ответ json, когда я рисую изображения на панели с помощью XTemplate, div добавляется в div перед ним. Это стало дочерним элементом вышеприведенного div, содержащего изображение.

код отвечает за это идет что-то вроде этого:

JSONPStore.on('load', function(){ 

var record = JSONPStore.getAt(0); 

if(record){ 
    data = record.raw.photos.photo; 
    //console.log(JSONPStore); 
    var newEl = Ext.create('Ext.panel.Panel', { 
     width: 1240, 
     margin: '0 20 0 20', 
     id: 'pnlEl', 
     store: JSONPStore, 
     overflowY: 'auto', 
     items: [ 
      { 
       xtype: 'panel', 
       id: 'toBeAdded', 
       overflowY: 'auto', 
       width: 600, 
       layout: 'fit', 
       style: "margin:15px", 
        bodyStyle: "padding:5px;font-size:11px;", 
        listeners:{ 
         render: function(){ 
          var tpl = new Ext.XTemplate(
            '<tpl for=".">', 
             //'<div class="actualImg">', 
              '<div>', 
              '<span>{title}</span>', 
              '<img src="http://farm{farm}.staticflickr.com/{server}/{id}_{secret}.jpg"', 
              '</div>', 
            '</tpl>' 

         ); 
         //console.log(this); 
         tpl.append(this.body, data); 

        } 
       } 
      } 
     ] 
    }); 

    if(vport.layout.align === 'stretch'){ 
     vport.add(newEl) ; 
     vport.doComponentLayout(); 
    } 

} 
else{ 
    console.log('Not Defined'); 
}JSONPStore.on('load', function(){ 

var record = JSONPStore.getAt(0); 

if(record){ 
    data = record.raw.photos.photo; 
    //console.log(JSONPStore); 
    var newEl = Ext.create('Ext.panel.Panel', { 
     width: 1240, 
     margin: '0 20 0 20', 
     id: 'pnlEl', 
     store: JSONPStore, 
     overflowY: 'auto', 
     items: [ 
      { 
       xtype: 'panel', 
       id: 'toBeAdded', 
       overflowY: 'auto', 
       width: 600, 
       layout: 'fit', 
       style: "margin:15px", 
        bodyStyle: "padding:5px;font-size:11px;", 
        listeners:{ 
         render: function(){ 
          var tpl = new Ext.XTemplate(
            '<tpl for=".">', 
             //'<div class="actualImg">', 
              '<div>', 
              '<span>{title}</span>', 
              '<img src="http://farm{farm}.staticflickr.com/{server}/{id}_{secret}.jpg"', 
              '</div>', 
            '</tpl>' 

         ); 
         //console.log(this); 
         tpl.append(this.body, data); 

        } 
       } 
      } 
     ] 
    }); 

    if(vport.layout.align === 'stretch'){ 
     vport.add(newEl) ; 
     vport.doComponentLayout(); 
    } 

} 
else{ 
    console.log('Not Defined'); 
} 

}, это);

Я хочу создать такую ​​структуру, как плитка, в которой находятся панели внутри панели. Но это создает divs внутри других divs.

Спасибо.

Answer 1

Есть множество проблем с кодом:

• Это классический случай overnesting, вам не нужна внутренняя панель
• Внешняя панель должна быть отдельный класс, то вы можете экземпляр
• Ext.panel.Panel ничего не знает о Магазинах, поэтому присвоение одного ему ничего не значит. Вы можете посмотреть на Ext.grid.Panel вместо этого
• id собственность следует избегать, если это абсолютно необходимо; этот id переводится непосредственно в DOM, и если вы попытаетесь повторно использовать этот компонент позже, вы получите исключение
• В этом случае макет не имеет ничего общего, он предназначен для укладки детей контейнера компонентов. Поскольку нет ни во внутренней панели, layout избыточна
• HTML в шаблоне сломана: вы открываете две дивы, но близко к только один, и IMG тег не хорошо сформированные
• Вам не нужно создавать и применять шаблон каждый раз, когда компонент отображается; на самом деле, делать это таким образом может быть худшим возможным по производительности. Назначьте шаблон для tpl конфигурации в наружной панели и вызвать update на него, когда данные поступают

Вы можете взглянуть на вид данных, например: http://docs.sencha.com/ext-js/4-2/#!/example/view/data-view.html

Answer 2

Ext.panel.Panel оперирующей в data, это приводит к неверному предположению, что он берет хранилище, в этом случае вы должны использовать dataview, а не панель, которая принимает шаблон и хранилище в качестве конфигурации. Таким образом, 'toBeAdded' должен быть dataview, а не панелью.

http://docs.sencha.com/ext-js/4-2/#!/api/Ext.view.View-cfg-store