0

您好我正在使用 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。

谢谢。

4

2 回答 2

3

您的代码存在许多问题：

  • 这是过度嵌套的经典案例，您不需要内部面板
  • 外部面板应该是一个单独的类，然后您可以实例化它
  • Ext.panel.Panel对 Stores 一无所知，因此为它分配一个什么也不做。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

于 2013-03-14T18:19:49.697 回答
0

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

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

于 2013-03-17T10:39:44.370 回答