Dear all,
I need to develop two presentation layers for same record set which, where presentation must be:
1. Rows (Grid)
2. Tiles (2 Options that I'm aware)

Sample views:
Grid View (1).jpg
Tile View.jpg


Issue is coming with presentation number two.
Idea and solution from Harry Deluxe is not working and I would rather try to develop with sencha original components.



Second solution was with View component and tpl as template. Little bit challenging was to put sencha components inside tpl but that was resolved with refresh listener.
Thing which is issue is binding on objects.

Here is test code:
Code:
Ext.define("Portal.view.admin.b2bcp.ShopCardView", {
    extend: 'Ext.view.View',
xtype: 'WidgetShopCardView',

requires: [
        'Portal.view.b2bbp.shop.ShopController',
],
//controller: 'shop',


cls: 'b2bbp-shop-widget-carditemview',
reference: 'b2bbp-shop-widget-carditemview',
bind: {
        store: '{items}',
record: '{record}'
},

tpl: new Ext.XTemplate(
        '<tpl for=".">',
'<div class="admin-b2bbp-cardview-card">',
'<div class="admin-b2bbp-cardview-content">',
'<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">',
'<img class="admin-b2bbp-cardview-image" src="https://dictionary.cambridge.org/images/thumb/lightb_noun_002_21219.jpg?version=5.0.74" height=190 width=180 />',
'<br/>',
'<div class="question-button"></div>',
'<p class="admin-b2bbp-cardview-descripion"> {description} </p>',
'<div class="details"></div>',
'<span class="admin-b2bbp-cardview-left shop-order-summary">Komad</span>',
'<span class="admin-b2bbp-cardview-right shop-order-summary">{msrp}</span>',
'<br/>',
'<div class="admin-b2bbp-cardview-pricesum">',
'<span class="admin-b2bbp-cardview-left shop-order-summary-value">Sveukupno</span>',
'<span class="admin-b2bbp-cardview-right shop-order-summary-value">{itemTotal}</span>',
'</div><br/>',
'<div class="buttons"></div>',
'</div>',
'</div>',
'</tpl>', {
            complied: true
}
    ),

itemSelector: 'div.admin-b2bbp-cardview-card',
listeners: {
        refresh: function (a, b) {
            var renderSelectorQuestionMark = Ext.query('div.question-button');
            for (var i in renderSelectorQuestionMark) {
                var rec = b[i];

Ext.create('Ext.form.field.Display', {
                    bind: {
                        value: rec.data.name
},
fieldCls: 'shop-order-summary',
renderTo: renderSelectorQuestionMark[i]
                });
}
            var renderSelectorButtons = Ext.query('div.buttons');
            for (var j in renderSelectorButtons) {
                var rec = b[j];
console.log('Render Buttons records', rec)
                Ext.create('Ext.container.Container', {
                    layout: {
                        type: 'column',
},
height: 50,
padding: '20 0 0 0',
items: [
                        {
                            xtype: 'container',
padding: '0 10 0 0',
items: [
                                {
                                    xtype: 'button',
glyph: 'xf068@FontAwesome',
width: 30,
height: 30,
record: rec,
handler: function(button) {
                                        console.log(button.record)
                                        //button.record.set('quantity',button.record.data.quantity-1);
},

}]
                        },
{
                            xtype: 'numberfield',
hideTrigger: true,
fieldCls: 'store-grid-text',
minValue: 1,
value: rec.data.quantity,
step: 1,
width: 100,
/*                            bind: {
                                value: rec.data.quantity,
                                record: rec
                            },*/
setRecord: function(record) { // Required for binding to work
this.record = record;
},
getRecord: function() { // Required for binding to work
return this.record;
}
                        },
{
                            xtype: 'container',
padding: '0 35 20 10',
items: [
                                {
                                    xtype: 'button',
glyph: 'xf067@FontAwesome',
width: 30,
height: 30,
record: rec,
handler: function(button) {
                                        console.log(button)
                                        console.log(button.record)
                                        //button.record.set('quantity',button.record.data.quantity+1);
},
setRecord: function(record) { // Required for binding to work
this.record = record;
},
getRecord: function() { // Required for binding to work
return this.record;
}
                                }]
                        },
{
                            xtype: 'button',
//text: 'Dodaj',
cls: 'shop-button',
iconCls: 'x-fa fa-shopping-basket',
maxWidth: 60,
height: 30,
record: rec,
handler: function(button) {
                                console.log(button.record);
},

}
                    ],
renderTo: renderSelectorButtons[j]
                });
}
            var renderSelectorDetails = Ext.query('div.details');
            for (var k in renderSelectorDetails) {
                Ext.create('Ext.button.Button', {
                    text: 'Detalji o proizvodu',
iconCls: 'x-fa fa-info-circle',
cls: 'shop-info-button',
renderTo: renderSelectorDetails[k]
                })
            }
        },
},


});
With this code also I have issue that all objects which are coming trough refresh listener on view disappear on record which is changed on grid view.

At the end, it's simple I just need to present records in some Card/Tile view with binding functionalities like in grid so that I can control all actions, what is the best way to do it and how.
Any idea is appreciated, thanks a lot.