Skip to content

Instantly share code, notes, and snippets.

@egomez99
Last active December 15, 2015 16:19
Show Gist options
  • Save egomez99/5288521 to your computer and use it in GitHub Desktop.
Save egomez99/5288521 to your computer and use it in GitHub Desktop.
Expand-Collapse functionality
var win = Ti.UI.createWindow({
height : Ti.UI.FILL,
width : Ti.UI.FILL,
backgroundColor : '#fff',
windowSoftInputMode: (Ti.UI.Android) ? Ti.UI.Android.SOFT_INPUT_ADJUST_PAN : ''
});
var tableView = Ti.UI.createTableView({
width : Ti.UI.FILL,
height : Ti.UI.FILL,
borderColor : 'black',
borderWidth : 5,
borderRadius : 15
});
win.add(tableView);
var listOptions = ['Apple', 'Orange', 'Mango', 'Peaches', 'Guava', 'Banana', 'Cherry', 'Pineapple', 'Avocado', 'ba', 'ba', 'ba', 'na', 'na', 'na'];
var tableData = [];
var heightSize = 40;
for (var i = 0; i < listOptions.length; i++) {
var row = Ti.UI.createTableViewRow({
width : '100%',
height : 25,
isExpanded : false
});
var box = Ti.UI.createView({
backgroundColor : 'red',
height : 200,
//layout: 'vertical'
});
var textfield = Titanium.UI.createTextField({
top: heightSize,
width : '80%',
height : 40,
color : '#000',
returnKeyType : Titanium.UI.RETURNKEY_DONE,
enableReturnKey : true,
keyboardType : Titanium.UI.KEYBOARD_ASCII,
autocorrect : false,
hintText : 'Enter text Field',
textAlign : 'left',
clearOnEdit : false,
borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
clearButtonMode : Titanium.UI.INPUT_BUTTONMODE_ONFOCUS,
leftButtonMode : Titanium.UI.INPUT_BUTTONMODE_ALWAYS
});
textfield.addEventListener('return', function() {
alert('return');
textfield.blur();
});
textfield.font = {
fontSize : '15sp',
fontFamily : 'Arial'
};
textfield.autocorrect = true;
textfield.borderStyle = Titanium.UI.INPUT_BORDERSTYLE_NONE;
box.add(textfield);
row.add(box);
tableData.push(row);
}//for
tableView.setData(tableData);
tableView.addEventListener('click', function(e) {
if (!e.row.isExpanded) {
//option 1: setting up to an arbitrary fixed value...
//e.row.height = 80;
//option 2: adhere to either SIZE-FILL behavior
e.row.height = Ti.UI.SIZE;
e.row.isExpanded = true;
} else {
//option 1
e.row.height = heightSize; //40;
//option 2
//e.row.height = Ti.UI.FILL;
e.row.isExpanded = false;
}
});
win.open();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment