[TIMOB-7810] iOS: TableviewRow - Cannot run code from TIMOB-4367

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2012-03-19T08:52:21.000+0000
Affected Version/s	Release 1.8.1, Release 1.8.2
Fix Version/s	Sprint 2012-05, Release 2.0.0
Components	iOS
Labels	module_tableviewrow, qe-ios021312, qe-testadded
Reporter	Wilson Luu
Assignee	Vishal Duggal
Created	2012-02-24T17:39:11.000+0000
Updated	2012-03-19T08:52:21.000+0000

Description

Details: Was doing regression testing and tried to run code from TIMOB-4367 on iOS. But, no rows appeared. Steps to reproduce: 1. Run code on iOS:

var win = Ti.UI.createWindow({ backgroundColor:'#fff' });

var btn = Ti.UI.createButton({
    color: 'black', layout:'center',
    title: 'Create big table view'
});
win.add(btn);
win.open();
btn.addEventListener('click', function() {
    var newWin = Ti.UI.createWindow({
        backgroundColor: '#fff',
        layout:'vertical'
    });
    var back = Ti.UI.createButton({
        color: 'black', top: 10,
        title: 'Back'
    });
    newWin.add(back);

    var tv = createBigTableView();
    newWin.add(tv);
    newWin.open();

    function clickListener() {
        back.removeEventListener('click', clickListener);
        newWin.close();
        tv.data = null;
        tv = null;
        newWin = null;
        back = null;
    }

    back.addEventListener('click', clickListener);
});

function createBigTableView() {
    var data = [];
    for (i = 1; i <= 1500; i++) {
        data.push(createCustomTableViewRow('RowsNMore', i));
    }
    return Ti.UI.createTableView({
        top:0, bottom:0, left:0, right:0,
        separatorColor: 'white',
        data: data
    });
}

function createCustomTableViewRow(label1text, label2text) {
    var row = Ti.UI.createTableViewRow({ className: 'customTVRow' });
    var vw = Ti.UI.createView({layout: 'vertical'});
    row.add(vw);
    vw.add(Ti.UI.createLabel({
        text: label1text, color: 'black',
        font: {fontSize: '9pt', fontWeight: 'bold'}
    }));
    vw.add(Ti.UI.createLabel({
        text: label2text, color: 'gray',
        font: {fontSize: '7pt', fontWeight: 'normal'}
    }));
    return row;
}

Actual: No red rows are displayed. See attachment. Expected: Should see 1500 rows like on Android. See attachment.

Attachments

File	Date	Size
androidRows.png	2012-02-24T17:54:01.000+0000	58808
iosRows.png	2012-02-24T17:54:01.000+0000	29116
iosRows2.png	2012-03-09T09:48:23.000+0000	58989

Comments

Blain Hamon 2012-03-06

Composite change renders rows, but still misplaced.

Vishal Duggal 2012-03-08

The code above has undefined behavior of placing a FILL height view inside a SIZE height view. Use this code to test that removes the undefined behavior

   var win = Ti.UI.createWindow({ backgroundColor:'#fff' });
   
   var btn = Ti.UI.createButton({
       color: 'black', layout:'center',
       title: 'Create big table view'
   });
   win.add(btn);
   win.open();
   btn.addEventListener('click', function() {
       var newWin = Ti.UI.createWindow({
           backgroundColor: '#fff',
           layout:'vertical'
       });
       var back = Ti.UI.createButton({
           color: 'black', top: 10,
           title: 'Back'
       });
       newWin.add(back);
   
       var tv = createBigTableView();
       newWin.add(tv);
       newWin.open();
   
       function clickListener() {
           back.removeEventListener('click', clickListener);
           newWin.close();
           tv.data = null;
           tv = null;
           newWin = null;
           back = null;
       }
   
       back.addEventListener('click', clickListener);
   });
   
   function createBigTableView() {
       var data = [];
       for (i = 1; i <= 1500; i++) {
           data.push(createCustomTableViewRow('RowsNMore', i));
       }
       return Ti.UI.createTableView({
           top:0, bottom:0, left:0, right:0,
           separatorColor: 'white',
           data: data
       });
   }
   
   function createCustomTableViewRow(label1text, label2text) {
       var row = Ti.UI.createTableViewRow({ className: 'customTVRow' });
       var vw = Ti.UI.createView({layout: 'vertical',height:Ti.UI.SIZE, backgroundColor:"red"});
       row.add(vw);
       vw.add(Ti.UI.createLabel({
           text: label1text, color: 'black',
           font: {fontSize: '9pt', fontWeight: 'bold'}
       }));
       vw.add(Ti.UI.createLabel({
           text: label2text, color: 'gray',
           font: {fontSize: '7pt', fontWeight: 'normal'}
       }));
       return row;
   }

Wilson Luu 2012-03-09

Hey Vishal, I ran your code using SDK build 2.0.0.v20120308234731 on iPhone 4S (5.0.1) and I am getting 1500 rows. But, the rows are not red and I don't see a back button. See attachment iosRows2.png
Vishal Duggal 2012-03-09

Have updated the sample so that rows have red background
Wilson Luu 2012-03-09

Note to QE: After talking to Vishal, the main issue is that you cannot see the back button on iOS even though you can see it on Android; this is blocked by TIMOB-4810. The red background color is irrelevant and a misjudgment on my part.
Blain Hamon 2012-03-10

Pull request #1616 fixes
Wilson Luu 2012-03-19

Closing bug. Verified fix on: SDK build: 2.0.0.v20120319003254 Titanium Studio, build: 2.0.0.201203182248 xcode: 4.2 Device: iphone 4s Verizon (5.0.1)

JSON Source