Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-17045] Android: Label 'html' and 'text' properties don't work together in ListView

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2014-06-05T20:05:54.000+0000
Affected Version/sRelease 3.3.0
Fix Version/sRelease 3.4.0
ComponentsAndroid
Labelsmodule_listview, qe-closed-3.4.0, qe-manualtest, qe-testadded, supportTeam
ReporterHieu Pham
AssigneeHieu Pham
Created2014-05-29T22:24:12.000+0000
Updated2014-08-19T09:25:24.000+0000

Description

Due to listView architecture of view recycling, 'html' and 'text' don't work together in side a list view.
var self = Ti.UI.createWindow({
    backgroundColor: 'white'
});
var myTemplate = {
    childTemplates: [                   // 
        {                            // Title 
            type: 'Ti.UI.Label',     // Use a label for the title 
            bindId: 'info',          // Maps to a custom info property of the item data
            properties: {            // Sets the label properties
                color: 'black',
                font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
                left: '60dp', top: 0,
                autoLink: Ti.UI.AUTOLINK_ALL
            }
        },
        {                            // Subtitle
            type: 'Ti.UI.Label',     // Use a label for the subtitle
            bindId: 'es_info',       // Maps to a custom es_info property of the item data
            properties: {            // Sets the label properties
                color: 'gray',
                font: { fontFamily:'Arial', fontSize: '14dp' },
                left: '60dp', top: '50dp',
                autoLink: Ti.UI.AUTOLINK_NONE
            }
        }
    ]
};
   
var listView = Ti.UI.createListView({
    // Maps myTemplate dictionary to 'template' string
    templates: { 'template': myTemplate },
    // Use 'template', that is, the myTemplate dict created earlier
    // for all items as long as the template property is not defined for an item.
    defaultItemTemplate: 'template'
});
var sections = [];
   
var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits / Frutas'});
var fruitDataSet = [
    { info: {html: "<a href='http://google.com'>http://google.com<;/a>"}, es_info: {text: 'Manzana'}},
    { info: {text: "Banana\t http://en.wikipedia.org/wiki/Banana"}, es_info: {text: 'Banana'}},
    { info: {text: "Pineapple\t http://en.wikipedia.org/wiki/Pineapple"}, es_info: {text: 'Pina'}},
    { info: {text: "Peach \thttp://en.wikipedia.org/wiki/Peach"}, es_info: {text: 'Durazno'}},
    { info: {text: "Apple\t http://en.wikipedia.org/wiki/Apple"}, es_info: {text: 'Manzana'}},
    { info: {text: "Banana\t http://en.wikipedia.org/wiki/Banana"}, es_info: {text: 'Banana'}},
    { info: {text: "Pineapple\t http://en.wikipedia.org/wiki/Pineapple"}, es_info: {text: 'Pina'}},
    { info: {text: "Peach \thttp://en.wikipedia.org/wiki/Peach"}, es_info: {text: 'Durazno'}}
];
fruitSection.setItems(fruitDataSet);
sections.push(fruitSection);
   
var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables / Verduras'});
var vegDataSet = [
    { info: {text: 'Carrot\thttp://en.wikipedia.org/wiki/Carrot'}, es_info: {text: 'Zanahoria'}},
    { info: {text: 'Potato\thttp://en.wikipedia.org/wiki/Potato'}, es_info: {text: 'Patata'}},
    { info: {text: 'Carrot\thttp://en.wikipedia.org/wiki/Carrot'}, es_info: {text: 'Zanahoria'}},
    { info: {text: 'Potato\thttp://en.wikipedia.org/wiki/Potato'}, es_info: {text: 'Patata'}},
];
vegSection.setItems(vegDataSet);
sections.push(vegSection);
   
var grainSection = Ti.UI.createListSection({ headerTitle: 'Grains / Granos'});
var grainDataSet = [
    { info: {text: "Corn\t http://en.wikipedia.org/wiki/Maiz"}, es_info: {text: 'Maiz'}},
    { info: {text: "Rice\t http://en.wikipedia.org/wiki/Rice"}, es_info: {text: 'Arroz'}},
    { info: {text: "Wheat\t http://en.wikipedia.org/wiki/Wheat"}, es_info: {text: 'Trigo'}},
    { info: {text: "Corn\t http://en.wikipedia.org/wiki/Maiz"}, es_info: {text: 'Maiz'}},
    { info: {text: "Rice\t http://en.wikipedia.org/wiki/Rice"}, es_info: {text: 'Arroz'}},
    { info: {text: "Wheat\t http://en.wikipedia.org/wiki/Wheat"}, es_info: {text: 'Trigo'}}
];
grainSection.setItems(grainDataSet);
sections.push(grainSection);
   
listView.setSections(sections);
       
self.add(listView);
self.open();
Steps to reproduce: 1. Run code above 2. Notice missing rows (you may need to scroll back and forth, depending on device)

Comments

  1. Hieu Pham 2014-05-29

    master PR: https://github.com/appcelerator/titanium_mobile/pull/5743
  2. Vishal Duggal 2014-06-05

    PR merged
  3. Dhirendra Jha 2014-08-19

    Verified fix with the below environment: Appcelerator Studio: 3.4.0.201408180158 SDK build: 3.4.0.v20140815142514 acs: 1.0.16 npm: 1.3.2 alloy: 1.5.0-dev CLI: titanium-3.4.0-dev titanium-code-processor:1.1.1 Xcode: Xcode 6 beta 5 Osx: Mavericks(10.9.3) Device: Galaxy Nexus (4.1.1) and Nexus 7(4.4.2) Label "html" and "text" property is working fine in ListView. Hence Closing the issue.

JSON Source