Мне нужно сделать что-то вроде интернет-магазина, где есть идеи, чтобы иметь просмотры продуктов. Один из них - сетка, а второй - карта / плитка.
Я пытаюсь добиться этого с помощью комбинации сетки сенча и представления с шаблоном, основанным на той же модели представления.
Если вы хотите просто «представить» данные view работает нормально, но если вам нужно привязать данные к элементам управления, возникают некоторые проблемы.
Примеры изображений:
- Grid view
- Карточка / представление мозаики
Проблема 1. Если я изменю количество в представлении сетки с помощью + на уровне строки, все кнопки и числовое поле c для этой строки исчезнут в представлении карточек
Проблема 2: кнопка +/- не работает при просмотре карточек, они не могут получить количество строк для увеличения или уменьшения значения
Есть идеи? Вот код просмотра карты:
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]
})
}
},
},