Extjs XTemplate not rendering properly

Question

Hi I am creating a flickr search using ExtJs and flickr API. After retrieving the json response when I am rendering the images in the panel using the XTemplate, the div is getting added to the div before it. It becomed the child of the above div containing the image.

The code responsible for it goes something like this:

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');
}

}, this);

I want to create a tile like structure with the divs inside the panel. But this is creating divs inside other divs.

Thanks.

Answer 1

Ext.panel.Panel takes a data attribute, this leads to a incorrect assumption that it takes a store, in this case you should use a dataview, not a panel which takes a template and a store as a configuration. So 'toBeAdded' should be a dataview, not a panel.

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

Answer 2

There are numerous problems with your code:

• This is a classical case of overnesting, you don't need the inner panel
• The outer panel should be a separate class, which then you can instantiate
• Ext.panel.Panel does not know anything about Stores, so assigning one to it does nothing. You may want to take a look at Ext.grid.Panel instead
• id property should be avoided unless absolutely necessary; this id translates directly into DOM and if you will try to reuse this component later you'll get an exception
• Layout has nothing to do in this case, it's for laying out container's children components. Since there are none in the inner panel, layout is redundant
• HTML in template is broken: you open two divs but close only one, and img tag is not well-formed
• You don't need to create and apply a template each time the component is rendered; in fact, doing it this way may be the worst possible performance-wise. Assign the template to tpl config in the outer panel and call update on it when the data arrives

You may want to take a look at the Data View example: http://docs.sencha.com/ext-js/4-2/#!/example/view/data-view.html