Extjs XTemplate 无法正确呈现

Question

您好，我正在使用 ExtJs 和 flickr API 创建一个 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');
}

}，这个）；

我想用面板内的 div 创建一个类似平铺的结构。 但这是在其他 div 中创建 div。

谢谢。

Answer 1

你的代码有很多问题：

• 这是一个经典的过度嵌套案例，您不需要内部面板
• 外部面板应该是一个单独的类，然后您可以对其进行实例化
• Ext.panel.Panel 对 Stores 一无所知，因此为它分配一个也无济于事。你可能想看看Ext.grid.Panel
• 除非绝对必要，否则应避免使用id 属性；这个id 直接转换成 DOM，如果你稍后尝试重用这个组件，你会得到一个异常
• 在这种情况下布局与布局无关，它用于布局容器的子组件。由于内部面板中没有，layout 是多余的
• 模板中的 HTML 已损坏：您打开了两个 div，但只关闭了一个，并且 img 标签格式不正确
• 您无需在每次渲染组件时都创建和应用模板；事实上，这样做可能是最糟糕的性能方面。将模板分配给外部面板中的tpl config，并在数据到达时调用update

您可能需要查看数据视图示例：http://docs.sencha.com/ext-js/4-2/#!/example/view/data-view.html

Answer 2

Ext.panel.Panel 采用数据属性，这导致错误地假设它采用存储，在这种情况下，您应该使用数据视图，而不是采用模板和存储作为配置的面板。所以 'toBeAdded' 应该是一个数据视图，而不是一个面板。

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