Question

On tap handler of a panel I am creating a list(which uses itemTpl), then populating its store with relevant items and then setting it to the container. When this list is shown first item is shown fully and rest all other items below it, overlap each other. This happens 90% of the time not always and if I resize browser or change orientation of device overlapping disappears and all items look proper.

Here is my store:

var listStore = Ext.create('Ext.data.Store', {
    fields: ['id','image','name','description']
});

Here is how I am populating the store:

var json = Ext.decode(response.responseText);
var arr = json.categories;
for(var x = 0; x < arr.length; x++) {
    if(arr[x].id == self.parent.cid){
        var itemsArr = arr[x].items;
        var myitems = [];
        for(var y = 0; y < itemsArr.length; y++) {
            myitems.push({"id":itemsArr[y].id, "image":itemsArr[y].image, "name":itemsArr[y].name, "description":itemsArr[y].description});
        }
        listStore.add(myitems);
    }
}

Here is how I am creating the list:

var itemsList = {
    xtype: 'list',
    itemTpl : self.parent.tp,
    store : listStore,
    flex : 1,
    id : 'ilid',
    layout : 'fit',
    templateId : 'detailsTemplate_'+self.parent.cid,
    detailsView : 'myshop.view.'+self.parent.ctype+'Details',
    direction: 'vertical',
    listeners: {
      itemtap: function (list, index, element, record)
      {
            var popup = Ext.create(list.detailsView, {
                    rec : record.getData(),
                    tid : list.templateId
            });
            Ext.Viewport.add(popup);
            popup.show('pop');
      }
    }
};

Here is template:

<tpl for="."><div class="tp_1"><div class="productBox"><div class="productTitle">{name}</div><div class="productBody"><img class="productImage" src="{image}"/></div></div></div></tpl>

Here is how it looks like:

Please help!

EDIT!!!
Here is Template:

<tpl for=".">
    <div class="tp_5">
        <div class="productBox">
            <div class="productTitle">{name}</div>
            <div class="productBody"><img class="productImage" src="{image}" width="300"/></div>
        </div>
    </div>
</tpl>

and here is related CSS:

.productBox
    {
        border:1px solid #9a9a9a;
    }
.productTitle
    {
        border-bottom:1px solid #9a9a9a;
        padding:5px 10px 0px 10px;
        background-color:#ccc;
        font-weight:bold;
        font-size: 80%;
        height:30px;
    }
.productBody
    {
        padding:10px;
        background-color: white;
    }
.productImage
    {
        margin-left: auto;
        margin-right: auto;
        display: block;
    }
.tp_5 .productBody, .st_5 {
        background-color : white;
    }

Edit

While testing various thing like using flex, providing margins, doing refresh etc I realized that this overlap happens only when the list is loaded for the first time. When I go back to main page and remove it from container

hccontainer.remove(Ext.getCmp('ilid'), true);

and then again create and put it in container onTap event, it renders fine.

Also overlapping happens only second item onwards, first item is always shown fully.

Answer 1

I found cleaner workaround for this issue by providing height to template div which holds image.

    .productBody
    {
        padding:10px;
        background-color: white;
        height : 240px;
    }

Looks like overlapping was happening because there was no default CSS height for template.