Şöyle bir listede DataItem oluşturmak istiyorum: Sencha touch 2.1'de karmaşık dataitem nasıl oluşturulur?
ama 3 bileşenleri ile orta vbox
bölüm oluşturamıyordur duyuyorum. Ben bu örneği takip ediyorum: böyle tanımlanır
Ext.define('MyTabApp.view.CartListItem', {
extend : 'Ext.dataview.component.DataItem',
alias : 'widget.cartlistitem',
requires: [
'Ext.Img'
],
config : {
cls: 'cart-list-item',
layout: {
type: 'hbox',
align: 'center'
},
image: true,
details: {
cls: 'x-details',
flex: 3,
},
pricing: {
cls: 'x-pricing',
flex: 1
},
removeButton: {
iconCls : 'delete',
iconMask : true,
ui : 'astonvilla',
style : 'margin-left: 5px; margin-top:10px; padding:5px;'
},
moveButton: {
iconCls : 'reply',
iconMask : true,
ui : 'astonvilla',
style : 'margin-left: 5px; margin-top:10px; padding:5px;'
},
editButton: {
iconCls : 'compose',
iconMask : true,
ui : 'astonvilla',
style : 'margin-left: 5px; margin-top:10px; padding:5px;'
},
dataMap: {
getImage: {
setSrc : 'itemImage'
},
getDetails: {
setItemTitle : 'title',
setQuantity : 'quantity'
},
getPricing: {
setHtml : 'totalPrice'
},
},
},
applyImage: function(config) {
return Ext.factory(config, Ext.Img, this.getImage());
},
updateImage: function(newImage, oldImage) {
if (newImage) {
this.add(newImage);
}
if (oldImage) {
this.remove(oldImage);
}
},
applyDetails: function(config) {
console.log("applyDetails");
var details = Ext.factory(config, MyTabApp.view.CartListItemDetails, this.getDetails());
console.log("applyDetails done");
console.log(details);
return details;
},
updateDetails: function(newDetails, oldDetails) {
console.log("updateDetails");
if (newDetails) {
this.add(newDetails);
}
if (oldDetails) {
this.remove(oldDetails);
}
},
applyPricing: function(config) {
return Ext.factory(config, Ext.Component, this.getPricing());
},
updatePricing: function(newPricing, oldPricing) {
if (newPricing) {
this.add(newPricing);
}
if (oldPricing) {
this.remove(oldPricing);
}
},
applyRemoveButton: function(config) {
return Ext.factory(config, Ext.Button, this.getRemoveButton());
},
updateRemoveButton: function(newRemoveButton, oldRemoveButton) {
if (oldRemoveButton) {
this.remove(oldRemoveButton);
}
if (newRemoveButton) {
// add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method
// when it happens
newRemoveButton.on('tap', this.onRemoveButtonTap, this);
this.add(newRemoveButton);
}
},
onRemoveButtonTap: function(button, e) {
var record = this.getRecord();
Ext.Msg.alert(
record.get('title'), // the title of the alert
"Id of this item is: " + record.get('itemId') // the message of the alert
);
},
applyEditButton: function(config) {
return Ext.factory(config, Ext.Button, this.getEditButton());
},
updateEditButton: function(newEditButton, oldEditButton) {
if (oldEditButton) {
this.remove(oldEditButton);
}
if (newEditButton) {
// add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method
// when it happens
newEditButton.on('tap', this.onEditButtonTap, this);
this.add(newEditButton);
}
},
onEditButtonTap: function(button, e) {
var record = this.getRecord();
Ext.Msg.alert(
record.get('title'), // the title of the alert
"Id of this item is: " + record.get('itemId') // the message of the alert
);
},
applyMoveButton: function(config) {
return Ext.factory(config, Ext.Button, this.getMoveButton());
},
updateMoveButton: function(newMoveButton, oldMoveButton) {
if (oldMoveButton) {
this.remove(oldMoveButton);
}
if (newMoveButton) {
// add an event listeners for the `tap` event onto the new button, and tell it to call the onNameButtonTap method
// when it happens
newMoveButton.on('tap', this.onMoveButtonTap, this);
this.add(newMoveButton);
}
},
onMoveButtonTap: function(button, e) {
var record = this.getRecord();
Ext.Msg.alert(
record.get('title'), // the title of the alert
"Id of this item is: " + record.get('itemId') // the message of the alert
);
}
});
Ve vbox
düzen ile özel bir görünüm olarak tanımlanır details
sesleniyorum orta bölüm: benim veri öğesi tanımlayan am nasıl http://www.sencha.com/blog/dive-into-dataview-with-sencha-touch-2-beta-2/
budur :
Ext.define('MyTabApp.view.CartListItemDetails', {
extend : 'Ext.Component',
alias : 'widget.cartlistitemdetails',
config : {
cls : 'x-details',
flex : 3,
layout : 'vbox',
titleCell: null,
qtyCell: null,
items : [{
xtype : 'panel',
flex : 1,
itemId : 'titleCell',
html : 'blahblah'
},
{
xtype : 'component',
flex : 1,
itemId : 'qtyCell',
html : 'blahblah'
}],
},
setItemTitle : function(title){
// this.down('#titleCell').setHtml(title);
console.log(this.getItems());
this.getItems()[0].html = title;
},
setQuantity : function(qty){
// this.down('#qtyCell').setHtml(qty);
console.log(this.getItems());
this.getItems()[0].html = qty;
}
});
Bu & yatay hizalanmış düğmeleri fiyatlandırma, görüntü ile liste öğelerini render edilir. Özel bileşen olan orta bölüm oluşturulmuyor. Ben öğeyi denetle Eğer html nasıl üretildiğini geçerli:
<div class="x-details x-layout-box-item x-flexed x-stretched" id="ext-cartlistitemdetails-1" style="-webkit-box-flex: 3;"></div>
bu div içinde hiçbir şey yoktur görebilir ve bu da oluşturulma biçimini olduğu gibi:
Ben yaklaştım görünüyor setItemTitle
yöntemi çağrılıyor, ancak hala this.down('#titleCell').setHtml(title)
veya this.getItems()[0].html = title;
çalışmıyor.
Hepsinden emin değilsiniz, ancak neden CartListItemDetails' içinde yalnızca iki öğe var? Ayrıca, 'titleCell' bir 'panel' ve 'qtyCell 'bir' bileşeni' neden? Ama gerçekten, neden sadece 'CartListItemDetails' CSS ile stil html içeriği ile basit bir 'panel' yapmak değil? – jakerella
Aynı zamanda bir HTML şablonu ve CSS büyüsü ile de yapardım. Sonra listede sadece bir itemtap dinleyici var. Itemtap dinleyicisi tarafından çağrılan işlevde, dokunma olayının hedefini bulabilir ve bu nedenle başka herhangi bir işlevi tetikleyebilirsiniz. –
@jakerella aslında hayal kırıklığından dolayı ekledim/kaldırdım/çok fazla şey değiştirdim çünkü bunun yerine 3 yerine 2 öğe ve ayrıca “panel” ve “konteyner”. – ThinkFloyd