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创建一个类似于tile的结构。但这是在其他div中创建div。

感谢。

Answer 1

您的代码存在许多问题：

这是一个经典的过度情况，你不需要内部面板
外部面板应该是一个单独的类，然后您可以实例化
Ext.panel.Panel对商店一无所知，所以分配一个商店什么都不做。您可能需要查看Ext.grid.Panel而不是
id财产;这个id直接转换为DOM，如果您稍后尝试重用此组件，您将获得异常
布局在这种情况下无关，它用于布置容器的子组件。由于内部面板中没有，layout是多余的
模板中的HTML被破坏：你打开两个div但只关闭一个，而且img标签格式不正确
每次渲染组件时都不需要创建和应用模板;事实上，这样做可能是性能最差的。将模板分配到外部面板中的tpl配置，并在数据到达时调用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

Extjs XTemplate无法正确呈现

2 个答案: