Affichage des articles dont le libellé est ListItem is somehow disabled again after call to enable(). Afficher tous les articles
Affichage des articles dont le libellé est ListItem is somehow disabled again after call to enable(). Afficher tous les articles

mardi 24 février 2015

ListItem is somehow disabled again after call to enable()

So far I have this working with the code below, but when I call "me.enable()" from ListItem.updateRecord(), the dom element looks enabled (x-deckitem-disabled class is removed, isDisabled() returns false), but the item is being re-enabled somewhere after the call to updateRecord().


Can I prevent the item from being disabled? Is there a better way to do this? Possibly to bind the list item's enabled/disabled state to the 'isPurchased' value in the model?



Code:



Ext.define('Deck', {
extend: 'Ext.data.Model',
config: {
fields: ['edition_title', 'game_title', 'sku', 'isPurchased', 'cards']
}
});

Ext.define('Speakeasy.view.DeckItem', {
extend: 'Ext.dataview.component.ListItem',
alias: 'widget.deckitem',
config: {
layout: {
type: 'vbox',
pack: 'justify',
// align: 'center',
},
hideAnimation: 'slideOut',
disabled: true,
items: [
{
xtype: 'component',
itemId: 'titleCmp',
__itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<tpl if="isPurchased">',
'<span class="deck-price">{price}</span>',
'</tpl>',
'</tpl>'
),
docked: 'left'
},
{
cls: 'buy-button-container',
xtype: 'container',
docked: 'right',
items: [
{
xtype: 'button',
text: 'Buy',
itemId: 'buy-button',
cls: 'buy-button',
hideAnimation: 'fadeOut',
showAnimation: 'slideIn',
handler: function(x, e) {
var sku = this.up('deckitem').getRecord().get('sku');
decksController.Purchase(sku);
e.stopEvent();
}
}
]
}
]
},
updateRecord: function(record) {
var me = this;
var buyButton = me.down('#buy-button');
if(record.get('isPurchased')) {
buyButton.hide();
if(me.isDisabled())
me.enable();
} else {
buyButton.show();
if(!me.isDisabled())
me.disabled();
}


if(record.get('price')) {
buyButton.setText(record.get('price'));
} else {
buyButton.setText(buyButton.getInitialConfig('text'));
}


me.callParent(arguments);
}
});


Ext.define('Speakeasy.view.Decks', {
extend: 'Ext.List',
xtype: 'decks',
alias: 'widget.decksview',
requires: [
'Ext.TitleBar',
'Ext.data.Store'
],
config: {
id: 'decksview',
itemId: 'decksview',
tabBarPosition: 'bottom',
layout: {
type: 'fit'
},
defaultType: 'deckitem',
// useComponents: true,
grouped: true,
store: {
model: 'Deck',
sorters: 'game_title',
fields: ['sku', 'edition_title', 'game_title'],
grouper: {
groupFn: function(record) {
var title = record.get('game_title');
if(title.split(' ')[0].toLowerCase().indexOf('the') == 0) {
return title.split(' ')[1][0];
} else {
return title[0];
}
}
},
data: Speakeasy.DECKS_LIST
},


itemTpl: '{game_title}',


items: [
{
docked: 'top',
xtype: 'titlebar',
title: 'Speakeasy',
// items: {
// xtype: 'button',
// text: 'Log Off',
// itemId: 'logOffButton',
// align: 'right'
// }
}
],


listeners: [
{
delegate: '#logOffButton',
event: 'tap',
fn: 'onLogOffButtonTap'
}
]
},


initialize: function() {
this.callParent(arguments);
// this is here to still allow a click to the child buy button
this.addBeforeListener('select', function(list, model, x, y, z) {
if(model.get('isPurchased') == false)
return false;
});
},


onLogOffButtonTap: function() {
this.fireEvent('signOffCommand');
}
});





ListItem is somehow disabled again after call to enable()