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ストアについては何も知らないので、ストアに割り当てても何も起こりません。Ext.grid.Panel代わりにご覧になることをお勧めします
  • idどうしても必要な場合を除いて、プロパティは避ける必要があります。これidは直接DOMに変換され、後でこのコンポーネントを再利用しようとすると、例外が発生します
  • この場合、レイアウトは何の関係もありません。コンテナの子コンポーネントをレイアウトするためのものです。インナーパネルに何もないのでlayout冗長です
  • テンプレートのHTMLが壊れています：2つのdivを開いても、1つだけ閉じて、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 は data 属性を受け取ります。これは、ストアを受け取るという誤った仮定につながります。この場合、テンプレートとストアを構成として受け取るパネルではなく、データビューを使用する必要があります。したがって、「toBeAdded」はパネルではなくデータビューである必要があります。

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

于 2013-03-17T10:39:44.370 に答える