Extjs4 Extjs XTemplate未正确呈现

您好，我正在使用ExtJs和FlickrAPI创建flickr搜索。在使用XTemplate呈现面板中的图像时检索到json响应后，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');
}

JSONPStore.on（'load'，function（））{
var记录=JSONPStore.getAt（0）；
如果（记录）{
数据=record.raw.photos.photo；
//console.log（JSONPStore）；
var newEl=Ext.create（'Ext.panel.panel'{
宽度：1240，
边距：“0200”，
id:'pnlEl'，
门店：JSONPStore，
溢出：“自动”，
项目：[
{
xtype:'面板'，
id:“tobeaded”，
溢出：“自动”，
宽度：600，
布局：“适合”，
样式：“边距：15px”，
车身样式：“填充：5px；字体大小：11px；”，
听众：{
render:function（）{
var tpl=new Ext.XTemplate(
'',
//'',
'',
“{title}”，
'',
''
);
//console.log（this）；
第三方物流附加（本主体、数据）；
}
}
}
]
});
如果（vport.layout.align==='stretch'）{
vport.add（newEl）；
vport.doComponentLayout（）；
}
}
否则{
console.log（“未定义”）；
}JSONPStore.on（'load'，function（））{
var记录=JSONPStore.getAt（0）；
如果（记录）{
数据=record.raw.photos.photo；
//console.log（JSONPStore）；
var newEl=Ext.create（'Ext.panel.panel'{
宽度：1240，
边距：“0200”，
id:'pnlEl'，
门店：JSONPStore，
溢出：“自动”，
项目：[
{
xtype:'面板'，
id:“tobeaded”，
溢出：“自动”，
宽度：600，
布局：“适合”，
样式：“边距：15px”，
车身样式：“填充：5px；字体大小：11px；”，
听众：{
render:function（）{
var tpl=new Ext.XTemplate(
'',
//'',
'',
“{title}”，
'',
''
);
//console.log（this）；
第三方物流附加（本主体、数据）；
}
}
}
]
});
如果（vport.layout.align==='stretch'）{
vport.add（newEl）；
vport.doComponentLayout（）；
}
}
否则{
console.log（“未定义”）；
}

}，这个）

我想创建一个类似瓷砖的结构，面板内有div。 但这是在其他div中创建div

---

谢谢。

您的代码有许多问题：

• 这是一个典型的嵌套情况，您不需要内面板
• 外部面板应该是一个单独的类，然后您可以实例化它

• Ext.panel.panel

  不知道有关存储的任何信息，因此为其指定一个存储并不起任何作用。您可能需要查看

  Ext.grid.panel

• 除非绝对必要，否则应避免使用

  id

  属性；此

  id

  直接转换为DOM，如果稍后尝试重用此组件，则会出现异常
• 在这种情况下，布局与此无关，它用于布局容器的子组件。由于内部面板中没有布局，

  Layout

  是多余的
• 模板中的HTML被破坏了：您打开了两个div，但只关闭了一个，并且img标记的格式不正确
• 您不需要在每次呈现组件时都创建和应用模板；事实上，这样做可能是最糟糕的性能。将模板分配到外部面板中的

  tpl

  config，并在数据到达时对其调用

  update

---

您可能想看看数据视图示例：

您的代码有许多问题：

• 这是一个典型的嵌套情况，您不需要内面板
• 外部面板应该是一个单独的类，然后您可以实例化它

• Ext.panel.panel

  不知道有关存储的任何信息，因此为其指定一个存储并不起任何作用。您可能需要查看

  Ext.grid.panel

• 除非绝对必要，否则应避免使用

  id

  属性；此

  id

  直接转换为DOM，如果稍后尝试重用此组件，则会出现异常
• 在这种情况下，布局与此无关，它用于布局容器的子组件。由于内部面板中没有布局，

  Layout

  是多余的
• 模板中的HTML被破坏了：您打开了两个div，但只关闭了一个，并且img标记的格式不正确
• 您不需要在每次呈现组件时都创建和应用模板；事实上，这样做可能是最糟糕的性能。将模板分配到外部面板中的

  tpl

  config，并在数据到达时对其调用

  update

---

您可能希望查看数据视图示例：

Ext.panel.panel采用数据属性，这导致错误地假设它采用存储，在这种情况下，您应该使用dataview，而不是采用模板和存储作为配置的面板。因此“tobeaded”应该是datavi