grid and view based on same view model - extjs

Question

I need to do something like web shop where ideas is to have to views on products. One is grid and second is card/tile.
I try to achive this with combination of sencha grid and view with template based on same view model.
If you want just "present" data view is working fine, but if you need bind data into controls there are some issues.
Example pictures:
Grid view
Card/Tile view
Issue 1: If I change quantity in Grid view with + on row level all buttons and numeric field for that row will disappear on Card view
Issue 2: +/- button are not working on card view, they cannot fetch row quantity to increase or decrease value
Any ideas ?
Here is the code of Card View:
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\">Quantity</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\">Total</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: "INFO",
iconCls: "x-fa fa-info-circle",
cls: "shop-info-button",
renderTo: renderSelectorDetails[k]
})
}
},
},