I'm working on Titanium and developing for iOS and I created a TableView with a button in every row and when you click on the row another button is added to the row, if it's clicked again the button is removed, every control has its own behavior and its own style. The problem I'm dealing with is that when I click on the row the style on the buttons is overridden, what I mean with this is that if any of the buttons had a particular background color, said color would be overriden and replaced by the row's backgroundColor, that also happens with the font color.
This is screenshot of how the row looks before being clicked:
The next one is when I click the row and the other button is added:
See how the small grey button background color is changed to the same color as the row background color. The same happens when I click the row to make disappear the button and click again the row to make it reappear:
This is how I define the row and the buttons:
function addToDo(title, priority, taskId){
var that = {};
var row = Ti.UI.createTableViewRow({
height:80,
value : taskId,
backgroundSelectedColor : 'transparent',
selectedBackgroundColor : 'transparent',
selectedColor : 'transparent',
item_type : 'ROW'
});
that.currentPriority = priority;
that.resolveColor = function(tmpPriority){
switch(tmpPriority){
case 0: backgroundColorPriority = "#da362a"; break;
case 1: backgroundColorPriority = "#da6c2a"; break;
case 2: backgroundColorPriority = "#da962a"; break;
case 3: backgroundColorPriority = "#dacb2a"; break;
}
return backgroundColorPriority;
}
var rowLayout = Ti.UI.createView({
backgroundColor : 'transparent'
});
var checkbox = Ti.UI.createButton({
top: 25,
left: 5,
width: 30,
height: 30,
borderColor: 'white',
borderWidth: 2,
borderRadius: 1,
backgroundColor: '#b1b1b1',
backgroundImage: 'NONE',
item_type : 'CHECKBOX',
value: false //value is a custom property in this case here.
});
row.add(checkbox);
//Attach some simple on/off actions
checkbox.on = function(item) {
this.backgroundColor = '#62b425';
item.backgroundColor = "#101010";
this.value = true;
};
checkbox.off = function(item) {
this.backgroundColor = '#b1b1b1';
item.backgroundColor = that.resolveColor(item.currentPriority);
this.value = false;
};
// Create a Label.
var todoTitleLabel = Ti.UI.createLabel({
text : title,
color : 'white',
font : {fontSize:11},
left : 40,
top : 35,
textAlign : 'center'
});
// Add to the parent view.
row.add(todoTitleLabel);
// Create a Button.
var deleteTask = Ti.UI.createButton({
title : 'Borrar',
height : 50,
width : 100,
top : 85,
left : 110,
item_type : 'DELETEBUTTON',
style : Ti.UI.iPhone.SystemButtonStyle.PLAIN,
color : '#000',
backgroundSelectedColor : '#F7F8E0',
selectedColor : '#F7F8E0',
backgroundColor : '#F7F8E0'
});
// Add to the parent view.
row.expand = function(){
this.height=160;
row.add(deleteTask);
};
row.contract = function(){
this.height=80;
row.remove(deleteTask);
};
var backgroundColorPriority = that.resolveColor(that.currentPriority);
row.backgroundColor = backgroundColorPriority;
that.currentRow = row;
checkbox.container = that.currentRow;
return that;
}
And this is how I handle the click event on the row:
table.addEventListener('click', function(e){
if(e.source.item_type == 'CHECKBOX'){
if(false == e.source.value) {
e.source.on(e.source.container);
} else {
e.source.off(e.source.container);
}
}else if(e.source.item_type == 'DELETEBUTTON'){
alert('delete button');
}else if(e.source.item_type == 'ROW'){
if(!borraState){
Ti.API.info('IN ' + JSON.stringify(e));
taskId = e.row.value;
todoId = tasks[taskId].todoId;
index = e.index;
borraLayout.animate(borrarLayoutIn);
e.source.expand();
borraState = true;
}else{
Ti.API.info('OUT ' + JSON.stringify(e));
borraLayout.animate(borrarLayoutOut);
borraState = false;
e.source.contract();
}
}
});
I don't understand why the colors are being overridden when the row is clicked, even though I have tried to redefine the background colors when dealing with the events, but to no avail. What am I doing wrong?
