TableView samples that use ClassName property

app.js

/*
//Sample 1
var tableView = require('tv_layout2');
tableView().open();
*/

/*
//Sample 2
var data = [];
var win = Ti.UI.createWindow();

var row = Ti.UI.createTableViewRow({
	className : 'scrolltab',
	height : 67,
	backgroundColor : '#fff',
	//selectionStyle : Ti.UI.iPhone.TableViewCellSelectionStyle.NONE
});

var scrollView = Titanium.UI.createScrollView({
	contentWidth : 500,
	contentHeight : 50,
	top : 10,
	height : 50,
	width : 230,
	borderRadius : 10,
	backgroundColor : '#13386c'
});
row.add(scrollView);
var view1 = Ti.UI.createView({
	backgroundColor : '#336699',
	width : 440,
	height : 40,
	left : 10
});
row.add(view1);
// add a bunch more views to the scrollView

data.push(row);

feedTableView = Titanium.UI.createTableView({
	data : data
});

win.add(feedTableView);
win.open(); 
*/


/*
//Sample 3
var win1 = Titanium.UI.createWindow({
    title:'Form Test',
    navBarHidden: true,
    backgroundColor:'#eee'
});
 
var tableView = Ti.UI.createTableView({
     
});
 
var rows = [];
 
var start = new Date();
 
for (var i = 0; i < 100; ++i) {
     
    var row = Ti.UI.createTableViewRow({ title: 'Row ' + i, className: 'Row' });
     
    tableView.appendRow(row);
}
 
Ti.API.info(new Date() - start);
 
win1.add(tableView);
 
win1.open();
*/


/*

//Sample 4
var inArray = function(needle, haystack) {
  for (var i = 0, len = haystack.length; i < len; i++) {
    if (needle === haystack[i]) {
      return true;
    }
  }
  return false;
};
 
var extend = function(base, props, rejects) {
  if (typeof base === 'undefined') {
    return {};
  }
 
  props = props || {};
  rejects = rejects || [];
 
  var obj = {}, k;
  for (k in base) {
    if (base.hasOwnProperty(k)) {
      obj[k] = base[k];
    }
  }
  for (k in props) {
    if (props.hasOwnProperty(k) && !inArray(k, rejects)) {
      obj[k] = props[k];
    }
  }
  return obj;
};
 
//create window
var win = Ti.UI.createWindow({
  title: 'test'
});
var extData = extend(win._data),
  EP_URL = 'http://www.mynailist.jp/json_n_list.php';
 
// Create Tableview
var table = Ti.UI.createTableView({});
 
// Create Rows (pictures)
var createRows = function(data) {
  var rows = [], i, c, len, item, row, left, image,
    BATCH = 20, COLS = 2, WIDTH = Ti.Platform.displayCaps.platformWidth,
    SPACE = 8, GAP = 6,
    width = Math.floor((WIDTH - 2 * SPACE - (COLS - 1) * GAP) / COLS);
  for (i = 1, len = Math.min(BATCH, parseInt(data.kensu,10)); i <= len; i += COLS) {
    if (!data['custid_' + i]) {
      break;
    }
 
    row = Ti.UI.createTableViewRow({
      backgroundColor: '#000000',
      height: 180,
      className: 'thumbitem'
    });
    left = SPACE;
 
    for (c = 0; c < COLS; c++) {
      if (!data['custid_' + (i + c)]) {
        break;
      }
 
      image = Ti.UI.createImageView({
        image: data['picnm_' + (i + c)],
        top: 8,
        left: left,
        bottom: 8,
        width: width,
        maxHeight: 180,
        ratio: parseInt(data['picnm_h_' + (i + c)], 10) / parseInt(data['picnm_w_' + (i + c)], 10)
      });
 
      row.add(image);
 
      left += width + GAP;
    }
 
    rows.push(row);
  }
 
  return rows;
};
 
// Create Footer (Reading Button(Row))
var createFooter = function() {
  // Create Footer (row)
  var row = Ti.UI.createTableViewRow({
    backgroundColor: '#000000',
    height: 'auto',
    className: 'thumbfoot'
  });
 
  // Create Footer (label)
  var cond = Ti.UI.createLabel({
    text: 'Read more 20 images',
    color: '#ffffff',
    textAlign: 'center',
    top: 38,
    bottom: 40,
    height: 'auto',
    width: 'auto',
    font: {fontSize: 18}
  });
  row.add(cond);
 
  return row;
};
 
// Reading JSON Data
var BATCH = 20;
var cache = {};
var load = function(params) {
  Ti.API.info(params.offset);
  // apply default parameters if needed
  if (typeof params === 'undefined') {
    params = {};
  }
  if (typeof params.offset === 'undefined') {
    params.offset = 1;
  }
 
  // load from JSON API
  var xhr = Ti.Network.createHTTPClient();
  xhr.setTimeout(20000);
 
  xhr.onload = function() {
    // parse response text as JSON
    var data = JSON.parse(this.responseText)[0],
      total, page, news, rows;
 
    // prepare header
    total = parseInt(data.kensu,10);
 
    // prepare result rows
    if (!cache.rows) {
      cache.rows = [];
    }
    news = createRows(data);
    cache.rows = cache.rows.concat(news);
 
    // prepare footer
    if (!cache.footer) {
      cache.footer = createFooter();
    }
 
    page = parseInt(data.offset,10);
    cache.footer._offset = page + 1;
    // Prepare data
    rows = cache.rows.slice(0);
    rows.unshift(cache.header);
    if (page * BATCH < total) {
      rows.push(cache.footer);
    }
 
    // append/insert rows
    if (table.data.length === 0 || table.data[0].rowCount === 0) {
      table.setData(rows, {animated: false});
    } else {
      for (var i = 0, len = news.length; i < len; i++) {
        table.insertRowBefore(table.data[0].rowCount - 1, news[i],
          {animated: false});
      }
    }
  };
 
  setTimeout(function() {
    xhr.abort();
  }, 20000);
 
  xhr.open('GET', EP_URL + '?offset=' + params.offset);
  xhr.send();
};
// check network availability
if (Ti.Network.online) {
  // Reading First page
  load(extData);
}
 
// When "Read more 20 images" footer is clicked, load more images
// Reading Button(Row) Event
table.addEventListener('click', function(e) {
  if (typeof e.row._offset !== 'undefined') {
    load(extend(extData, {offset: e.row._offset}));
    Ti.API.info('---------------> Unused memory is currently: ' + Ti.Platform.availableMemory);
  }
});
win.add(table);
 
win.open();
*/




/*
//Sample 4
var win=Ti.UI.createWindow({});
var table=Ti.UI.createTableView({});
win.add(table);
win.addEventListener("open",function () {
    var data=[];
     
    for(i=0;i<10;i++) {
        (function(i) {
            var row=Ti.UI.createTableViewRow({width:320,height:200});
            row.addEventListener("postlayout",function() {Ti.API.info("row:"+i)});
     
 
            var bimg=Ti.UI.createImageView({image:'http://overtheair.org/blog/wp-content/uploads/2011/09/appcelerator-logo.png',top:25,left:0,right:0,bottom:5});
            bimg.addEventListener("postlayout",function() {Ti.API.info("bimg:"+i)});
 
            var simg=Ti.UI.createImageView({image:'http://overtheair.org/blog/wp-content/uploads/2011/09/appcelerator-logo.png',top:25,left:5,width:30,height:30});
            simg.addEventListener("postlayout",function() {Ti.API.info("simg:"+i)});
 
            var bview=Ti.UI.createView({top:0,left:0,width:100,height:20});
            bview.addEventListener("postlayout",function() {Ti.API.info("bview:"+i)});
 
            var label=Ti.UI.createLabel({text:"row:"+i,top:5,left:5,right:5,bottom:5,height:Ti.UI.SIZE});
            label.addEventListener("postlayout",function() {Ti.API.info("label:"+i)});
 
            row.add(bimg);      
            row.add(simg);
            bview.add(label);       
            row.add(bview);
             
             
            row.className="testrow";
            data.push(row);
        })(i);
    }
    table.setData(data);
     
});
 
win.open();
*/


/*
//Sample 5
var win = Ti.UI.createWindow();
var table = Ti.UI.createTableView();
 
function Row(name) {
    var row = Ti.UI.createTableViewRow({className: 'meh', reusable: true, height: Ti.UI.SIZE });
    row.add(Ti.UI.createLabel({text: name}));
    return row;
}
 
function reloadOne() {
    var data = [
        Row('Row 1'),
        Row('Row 2'),
        Row('Row 3'),
        Row('Row 4')
    ];
     
    table.setData(data);
}
 
function reloadTwo() {
    var data = [
        Row('Row 5'),
        Row('Row 6'),
        Row('Row 7'),
        Row('Row 8')
    ];
     
    table.setData(data);
}
win.add(table);
 
var btnOne = Ti.UI.createButton({
    title : 'click',
});
var btnTwo = Ti.UI.createButton({
    title : 'click',
});
 
btnOne.addEventListener('click', reloadOne);
btnTwo.addEventListener('click', reloadTwo);
 
win.rightNavButton = btnOne;
win.leftNavButton = btnTwo;
 
win.open({modal:true});

*/

tv_layout2.js

function tv_layout2() {
	var win = Titanium.UI.createWindow();
	win.barColor = '#385292';

	if (Ti.Platform.osname !== 'mobileweb') {

		//
		// CREATE SEARCH BAR
		//
		var search = Titanium.UI.createSearchBar({
			barColor:'#385292',
			showCancel:false
		});
		search.addEventListener('change', function(e)
		{
			e.value; // search string as user types
		});
		search.addEventListener('return', function(e)
		{
			search.blur();
		});
		search.addEventListener('cancel', function(e)
		{
			search.blur();
		});
	}

	var tableView;
	var data = [];

	// create first row
	var row = Ti.UI.createTableViewRow();
	row.backgroundColor = '#576996';
	row.selectedBackgroundColor = '#385292';
	row.height = 40;
	var clickLabel = Titanium.UI.createLabel({
		text:'Click different parts of the row',
		color:'#fff',
		textAlign:'center',
		font:{fontSize:14},
		width:'auto',
		height:'auto'
	});
	row.className = 'header';
	row.add(clickLabel);
	data.push(row);

	// when you click the header, scroll to the bottom
	row.addEventListener('click',function()
	{
		tableView.scrollToIndex(40,{animated:true,position:Ti.UI.iPhone.TableViewScrollPosition.TOP});
	});

	// create update row (used when the user clicks on the row)
	function createUpdateRow(text)
	{
		var updateRow = Ti.UI.createTableViewRow();
		updateRow.backgroundColor = '#13386c';
		updateRow.selectedBackgroundColor = '#13386c';

		// add custom property to identify this row
		updateRow.isUpdateRow = true;
		var updateRowText = Ti.UI.createLabel({
			color:'#fff',
			font:{fontSize:20, fontWeight:'bold'},
			text:text,
			width:'auto',
			height:'auto'
		});
		updateRow.className = 'updated_row';
		updateRow.add(updateRowText);
		return updateRow;
	}
	// create a var to track the active row
	var currentRow = null;
	var currentRowIndex = null;

	// create the rest of the rows
	for (var c=1;c<50;c++)
	{
		var row = Ti.UI.createTableViewRow();
		row.selectedBackgroundColor = '#fff';
		row.height = 100;
		row.className = 'datarow';
		row.clickName = 'row';

		var photo = Ti.UI.createView({
			backgroundImage:'/images/custom_tableview/user.png',
			top:5,
			left:10,
			width:50,
			height:50,
			clickName:'photo'
		});
		row.add(photo);


		var user = Ti.UI.createLabel({
			color:'#576996',
			font:{fontSize:16,fontWeight:'bold', fontFamily:'Arial'},
			left:70,
			top:2,
			height:30,
			width:200,
			clickName:'user',
			text:'Fred Smith '+c
		});

		row.filter = user.text;
		row.add(user);

		var fontSize = 16;
		if (Titanium.Platform.name == 'android') {
			fontSize = 14;
		}
		var comment = Ti.UI.createLabel({
			color:'#222',
			font:{fontSize:fontSize,fontWeight:'normal', fontFamily:'Arial'},
			left:70,
			top:21,
			height:50,
			width:200,
			clickName:'comment',
			text:'Got some fresh fruit, conducted some business, took a nap'
		});
		row.add(comment);

		var calendar = Ti.UI.createView({
			backgroundImage:'/images/custom_tableview/eventsButton.png',
			bottom:2,
			left:70,
			width:32,
			clickName:'calendar',
			height:32
		});
		row.add(calendar);

		var button = Ti.UI.createView({
			backgroundImage:'/images/custom_tableview/commentButton.png',
			top:35,
			right:5,
			width:36,
			clickName:'button',
			height:34
		});
		row.add(button);

		var date = Ti.UI.createLabel({
			color:'#999',
			font:{fontSize:13,fontWeight:'normal', fontFamily:'Arial'},
			left:105,
			bottom:5,
			height:20,
			width:100,
			clickName:'date',
			text:'posted on 3/11'
		});
		row.add(date);

		data.push(row);
	}


	//
	// create table view (
	//
	if (Ti.Platform.osname !== 'mobileweb') {
		tableView = Titanium.UI.createTableView({
			data:data,
			search:search,
			filterAttribute:'filter',
			backgroundColor:'white'
		});
	} else {
		tableView = Titanium.UI.createTableView({
			data:data,
			filterAttribute:'filter',
			backgroundColor:'white'
		});
	}

	tableView.addEventListener('click', function(e)
	{
		Ti.API.info('table view row clicked - source ' + e.source);
		// use rowNum property on object to get row number
		var rowNum = e.index;
		var updateRow;
		if (Ti.Platform.osname !== 'mobileweb') {
			updateRow = createUpdateRow('You clicked on the '+e.source.clickName);
			tableView.updateRow(rowNum,updateRow,{animationStyle:Titanium.UI.iPhone.RowAnimationStyle.LEFT});
		} else {
			updateRow = createUpdateRow('Row clicked');
			tableView.updateRow(rowNum,updateRow);
		}
	});

	win.add(tableView);

	return win;
};

module.exports = tv_layout2;