Titanium ListView (CommonJS) with reponsive orientation changes layout

app.js

var countryData = [];
var countrySection;
var countryList;

var maxFetchRows = 20;
var currentListMarker = 0;

var testWin = Titanium.UI.createWindow({  
	top:20,
	backgroundColor: '#f9f9f9',
    title:'ListView layout'
});


setupCountryList();
testWin.open();
loadEURCountries();

Ti.Gesture.addEventListener('orientationchange', redrawOrientation); // Setup our orientation handling routine

function setupCountryList() {
	countrySection = Titanium.UI.createListSection();
			
	countryList = Ti.UI.createListView({
		width: Ti.UI.FILL,
		height: Ti.UI.SIZE,
		top: 0,
	 	layout: 'vertical',
	 	separatorInsets: { left: 10, right: 10 },
	 	backgroundColor: 'transparent',
	 	touchEnabled: true,		
	 	sections: [countrySection],
	 	defaultItemTemplate: 'countrydata',
	 	templates: { 'countrydata': getCountryTemplate() },
		showVerticalScrollIndicator: true
	});			
	countryList.addEventListener('marker', loadData); // This is the event behind infinite scrolling
	testWin.add(countryList);
	
	function getCountryTemplate() {
		var countryTemplate = {
			properties: {
				accessoryType: Ti.UI.LISTACCESSORYTYPENONE,
				selectionStyle: Ti.Platform.osname == 'android' ? null : Titanium.UI.iPhone.ListViewCellSelectionStyle.NONE, //setting this will disable listview item from getting selected in iOS
				height: Ti.UI.SIZE,
				width: Ti.UI.FILL,
				backgroundColor: 'transparent'
			},
			childTemplates: 
			[
				{
					type: 'Ti.UI.View',
					properties: {
						touchEnabled: true,
						height: Ti.UI.SIZE,
						width: Ti.UI.FILL,
						backgroundColor: 'transparent',
						top: '30dp',
						bottom: '30dp', 
						left: '10dp', 
						right: '10dp', 
						layout: 'horizontal'
					},
					childTemplates: 
					[
						//Column #1 - country, it will always visible in this example
						{
							type: 'Ti.UI.Label',
							bindId: 'country',
							properties: {
								touchEnabled: false,
								color: '#000000',
								font: {fontSize: '18sp'},
								height: Ti.UI.SIZE,
								width: Ti.UI.FILL,
							}
						},
						//Column #2 - capital, only visible in Landscape
						{
							type: 'Ti.UI.Label',
							bindId: 'capital',
							properties: {
								touchEnabled: false,
								font: {fontSize: '16sp'},
								color: '#4f4f4f',
								height: Ti.UI.SIZE,
								width: 0, // set width to 0
								visible: false // and not visible by default
							}
						}
					]
				}
			]
		};	
		
		return countryTemplate;
	}

}

function redrawOrientation(e) {
	//Start by checking if it is portrait (pay very attention to this, different platforms may give different results)
	var isPortrait = Titanium.Gesture.orientation == Titanium.UI.PORTRAIT || Titanium.Gesture.orientation == Titanium.UI.UPSIDE_PORTRAIT;
	var replaceItems = [];
	for(var i=0,j=countrySection.items.length; i<j; i++){
	  var listItem = countrySection.items[i];
	  //Show/hide the second column and manipulate the first column width accordingly 
	  listItem.country.width = isPortrait ? Ti.UI.FILL : '50%';
	  listItem.capital.width = isPortrait ? 0 : '50%';
	  listItem.capital.visible = !isPortrait;
	  replaceItems.push(listItem);
	};
	//Update all list items
	countrySection.setItems(replaceItems);
}

/*
 * This is where we feed the list infinite scroll. In this example we've previously loaded an array with data with the loadEURCountries function,
 * and we're just taking chunks of data from it, but it should be replaced by some sort of webservice paging logic in a real scenario.
 */
function loadData() {
	var data = countryData.slice(currentListMarker,  currentListMarker + maxFetchRows);
	var listData = [];
	var isPortrait = Titanium.Gesture.orientation == Titanium.UI.PORTRAIT || Titanium.Gesture.orientation == Titanium.UI.UPSIDE_PORTRAIT;
	for(var i=0,j=data.length; i<j; i++){
	  listData.push({
	  	country: { text : data[i].name, width: isPortrait ? Ti.UI.FILL : '50%' },
	  	capital: { text : data[i].capital, width: isPortrait ? 0: '50%', visible: isPortrait }
	  }); 
	};
	
	currentListMarker += maxFetchRows;
	countrySection.appendItems(listData);
	countryList.setMarker({sectionIndex:0, itemIndex:countrySection.items.length -1});
}

/*
 * This will load all data in a single shot. 
 * In this example we'll be using all countries that have the EURO as currency. Prepare for some surprises!
 */
function loadEURCountries() {
	var jsonData = null;
	try {
		var _getJSONxhr = Ti.Network.createHTTPClient({
	    	onload: function() {
	    		try {
	    			jsonData =  JSON.parse(this.responseText);    			
	    		}
	    		catch(err) {
					showGetJSONError(err);    			
	    		}	
	    		if (jsonData != null)
				{
					//We'll only use country name and capital for this example 	
					for(var i=0,j=jsonData.length; i<j; i++){
					  countryData.push({
					  		name: jsonData[i].name,
					  		capital: jsonData[i].capital
					  });
					};	
					//We got our data, render our first rows
					loadData();
				}
	    	},
			onerror : function(err) {
				showGetJSONError(err);
				this.abort();       
			},
			timeout : 5000	    	
 		});
		_getJSONxhr.open("GET", 'http://restcountries.eu/rest/v1/all');
		_getJSONxhr.send();
	}
	catch(err)
	{	
		showGetJSONError(err);
	}	
}

function showGetJSONError(err) {
	Ti.API.info(String.format('GET JSON ERROR: %s', JSON.stringify(err)));
	alert('Something went wrong while fetching data. Please review your console log.');
}