Titanium iPhone: making a dialog similar to this standard iPhone ui? - iphone

Question

I'm attempting to implement a dialog for a user to choose several of many toggle-able options. The iPhone has a nice model for this, in Settings/General/Keyboards:
However, I could not re-create this exactly: this task is to show two table sections (tables?), but only one is editable. (The one with the keyboard list.)
The Titanium API only allows a table to be editable, not a section. And I couldn't figure out how to layout two tables to scroll together. (I tried putting them both in a ScrollView, etc.)
Anyone able to do something like this?
EDIT: Here's my workaround, which I consider sub-optimal. :-( Instead of that second table section with the control element, I'm using a toolbar at the bottom:

Answer 1

You can control whether any row is editable or not by setting the editable property on the row (it defaults to the value of the table if not set).

Answer 2

You don't need two tables; one table view, set to grouped, with separate sections will suffice. That way scrolling works perfectly, and editing works across the entire table. I'm not sure why editing is only working for one section for you, but I've put together an example which shows editing working across multiple table sections. To run it, create a project and replace the content of app.js with the following:
// Windows
var root = Ti.UI.createWindow();
var window = Ti.UI.createWindow({
title: 'Keyboards',
showNavBar: true
});
// Create table
var table = Ti.UI.createTableView({
editable: true,
style: Ti.UI.iPhone.TableViewStyle.GROUPED
});
// Create section 1 - this section is editable
var section1 = Ti.UI.createTableViewSection();
var row1 = Ti.UI.createTableViewRow({title:"English (UK)"});
var row2 = Ti.UI.createTableViewRow({title:"Chinese - Simplified"});
section1.add(row1);
section1.add(row2);
// Create section 2 - this section is not editable
var section2 = Ti.UI.createTableViewSection();
var row3 = Ti.UI.createTableViewRow({title:"French", editable: false});
var row4 = Ti.UI.createTableViewRow({title:"Spanish", editable: false});
section2.add(row3);
section2.add(row4);
// Add data to the table
var data = [
section1,
section2
];
table.data = data;
window.add(table);
// Set up the buttons
var edit = Titanium.UI.createButton({
title:'Edit'
});
edit.addEventListener('click', function()
{
window.setRightNavButton(cancel);
table.editing = true;
});
var cancel = Titanium.UI.createButton({
title:'Cancel',
style:Titanium.UI.iPhone.SystemButtonStyle.DONE
});
cancel.addEventListener('click', function()
{
window.setRightNavButton(edit);
table.editing = false;
});
window.setRightNavButton(edit);
// Add the window to the nav view and open
var nav = Ti.UI.iPhone.createNavigationGroup({
window: window
});
root.add(nav);
root.open();