We used the insertSection method to dynamically insert sections into the table on tap of a button. However, on orientation change, the labels in the rows(of the new section) either overlap with each other or don't resize accordingly, as shown in the screenshots attached.
var win = Ti.UI.createWindow({
backgroundColor:'white'
});
var myTable = Ti.UI.createTableView({
backgroundColor : "transparent",
minRowHeight : 44,
height : '100%',
width : '100%',
style : Titanium.UI.iPhone.TableViewStyle.GROUPED
});
var sections = [];
var tableSection = Ti.UI.createTableViewSection();
tableSection.headerTitle = "First Section";
var aRow = Ti.UI.createTableViewRow({
highlightedColor : '#FFF',
color : "#2c95de",
font : {
fontSize : 17,
fontWeight : "bold"
},
minimumFontSize : 12,
textAlign : 'center',
height : "auto",
title : "Tap to add New Section"
});
aRow.addEventListener('click',addNewSection);
tableSection.add(aRow);
sections.push(tableSection);
var tableSection1 = Ti.UI.createTableViewSection();
tableSection1.headerTitle = "Second Section";
for(i = 0; i<3;i++){
var aRow = Ti.UI.createTableViewRow({
backgroundColor : "#FFFF",
height : 44,
left : 10,
right : 10,
hasChild : true,
selectionStyle : Ti.UI.iPhone.TableViewCellSelectionStyle.BLUE
});
aRow.title = "Row "+i+" Second Section";
tableSection1.add(aRow);
}
sections.push(tableSection1);
myTable.data = sections;
win.add(myTable);
win.open();
function addNewSection(e)
{
// if(myTable.sectionCount == 2){
// myTable.deleteSection(1);
// }
var row1 = Ti.UI.createTableViewRow({
backgroundColor : "#FFFF",
height : Ti.UI.SIZE,
left : 10,
right : 10,
hasChild : true,
selectionStyle : Ti.UI.iPhone.TableViewCellSelectionStyle.BLUE,
layout : 'vertical'
});
var row1Text = Ti.UI.createLabel({highlightedColor : '#FFF',
color : "#333",
font : {
fontSize : 17,
fontWeight : "bold"
},
minimumFontSize : 12,
top : 2,
left : 10,
right : 10,
height : 19,
text : "Site"
});
row1.add(row1Text);
var siteTextLabel = Ti.UI.createLabel({
textAlign : "left",
color : "#6A6A6A",
left : 10,
bottom : 2,
font : {
fontSize : 14
},
height : Ti.UI.SIZE,
text : "131448434, SOME SITE NAME, ABC CITY, XYZ TECHNOLOGY PARK, STATE, MA 13148184014"
});
row1.add(siteTextLabel);
var row2 = Ti.UI.createTableViewRow({
backgroundColor : "#FFFF",
height : Ti.UI.SIZE,
left : 10,
right : 10,
hasChild : true,
selectionStyle : Ti.UI.iPhone.TableViewCellSelectionStyle.BLUE,
layout : 'vertical'
});
var row2Text = Ti.UI.createLabel({highlightedColor : '#FFF',
color : "#333",
font : {
fontSize : 17,
fontWeight : "bold"
},
minimumFontSize : 12,
top : 2,
left : 10,
right : 10,
height : 19,
text : "Product"
});
row2.add(row2Text);
var productTextLabel = Ti.UI.createLabel({
textAlign : "left",
color : "#6A6A6A",
left : 10,
bottom : 2,
font : {
fontSize : 14
},
height : Ti.UI.SIZE,
text : "New Product Relaesed 12 SQL Server, Version 123, Site ABC"
});
row2.add(productTextLabel);
var tableSectionNew = Ti.UI.createTableViewSection();
tableSectionNew.headerTitle = "New Section";
tableSectionNew.add(row1);
tableSectionNew.add(row2);
myTable.insertSectionAfter(0,tableSectionNew);
}
Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/4988
Verified the fix with: OSX: 10.9.2 Xcode: 5.1.1 Studio - 3.3.0.201404211130 SDK - 3.3.0.v20140422163054 acs-1.0.14 alloy-1.4.0-dev npm-1.3.2 titanium-3.3.0-dev titanium-code-processor-1.1.1-beta1 Device: iPhone 5s (7.1)