Extjs XTemplate 无法正确呈现

Posted 2023-02-26

【中文标题】Extjs XTemplate 无法正确呈现

【英文标题】：Extjs XTemplate not rendering properly

【发布时间】：2013-03-14 12:55:06

【问题描述】：

您好，我正在使用 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://farmfarm.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://farmfarm.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。

谢谢。

【参考方案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

【讨论】：

我也会使用数据视图来处理这样的事情

【参考方案2】：

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

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