ShowTable of Contents
create a table view with formatted rows
You can add TableViewRow objects to a TableView. With rows you can add anything you like to a row.
Example:
var data = [];
while (...) {
var row = Ti.UI.createTableViewRow({
hasDetail:true,
height:'auto',
layout:'vertical',
className:'myrow'
});
var labelContainer = Ti.UI.createView({
height:'auto',
width:'100%'
})
labelContainer.add(Ti.UI.createLabel({
width:'100%',
height:'auto',
top:1,
left:2,
text:"some text"
}));
row.add(labelContainer);
data.push(row);
}
var tableview = Ti.UI.createTableView({
data:data
});
The 'class' property is important. All rows with the same layout has to have the same class property, otherwise building the table might be slow or even crash.
If the row has 'height' set to 'auto', all elements added to the row has to have 'auto', too.
reset rows
You can set a new array of rows to the tableView with:
tableview.setData(data)
click event
Check which row was clicked:
tableView.addEventListener('click', function(e) {
// e.rowData contains the clicked row
});
add a row
tableView.addRow(row, {
animationStyle:Titanium.UI.iPhone.RowAnimationStyle.LEFT})
other animations:
Titanium.UI.iPhone.RowAnimationStyle.FADE
Titanium.UI.iPhone.RowAnimationStyle.LEFT
Titanium.UI.iPhone.RowAnimationStyle.RIGHT
Titanium.UI.iPhone.RowAnimationStyle.TOP
Titanium.UI.iPhone.RowAnimationStyle.BOTTOM
Titanium.UI.iPhone.RowAnimationStyle.NONE
If you have to add many rows, create an array of the row objects and use tableView.setData() to replace all rows of the tableView at once. This is much faster then adding the rows one by one.
add a searchbar
var search = Titanium.UI.createSearchBar({
backgroundGradient : yn_skin.gradient_gray_light,
autocapitalization : Ti.UI.TEXT_AUTOCAPITALIZATION_NONE,
autocorrect : false,
hintText : 'search'
});
App.window_main.tableview = Ti.UI.createTableView({
data : data,
search : search,
filterAttribute : 'subject'
});
This example uses a gradient from the YouAtNotes Framework.
The 'filterAttribute' property defines which row attribute is used for the search.
In this example, a row has an attribute "subject" like this:
var row = Ti.UI.createTableViewRow({
hasDetail:true,
height:'auto',
layout:'vertical',
className:'myrow',
subject: 'some text'
});
restore search when window is opened again
If you did a search in the tableView's searchbar, jump to another window and jump back, the search result is gone.
To avoid this, you can remember the search query and restore it when the window containing the tableView gets focus.
Example:
// create the search bar like in the examples above
App.window_main.search = Titanium.UI.createSearchBar({
backgroundGradient : yn_skin.gradient_gray_light,
autocapitalization : Ti.UI.TEXT_AUTOCAPITALIZATION_NONE,
autocorrect : false,
hintText : 'search'
});
// add the searchbar to a tableView
App.window_main.table = Ti.UI.createTableView({
search : App.window_main.search,
filterAttribute : 'subject',
data : [{title:'loading...'}]
});
// click event in the tableView -> open another window or something like that
App.window_main.table.addEventListener('click', function(e) {
// open content in another window
...
// remember value of the search bar (if there is a value)
if (App.window_main.search.value) {
App.window_main.search.ynvalue = App.window_main.search.value;
}
});
// and on focus, restore the search value
App.window_main.addEventListener('focus', function(e) {
if (App.window_main.search.ynvalue) {
App.window_main.search.value = App.window_main.search.ynvalue
App.window_main.search.ynvalue = "";
}
});