Search code examples
javascriptandroidtitaniumappceleratorappcelerator-alloy

Never image with a custom ListView in appcelerator

I'm building an app with appcelerator that show a ListView with a custom template. So This is the code of my xml file:

<ListView id="elementsList" defaultItemTemplate="elementTemplate">
            <Templates>
                <ItemTemplate name="elementTemplate" class="itemTemplate">

                    <View id="atomProperties">
                        <Label bindId="name" id="name" />
                        <View id="secondLine">
                            <Label class="line2 fieldLabel" text="from: " />
                            <Label class="line2" bindId="dateStart" id="dateStart" />
                            <Label class="line2 fieldLabel" text=" to: " />
                            <Label class="line2" bindId="dateEnd" id="dateEnd" />
                        </View>
                        <Label bindId="quantity" id="quantity" left="0"/>
                    </View>
                </ItemTemplate>
            </Templates>
            <ListSection>               
                <ListItem quantity:text="10 minute" quantity:color="#090"  name:text="Hydrogen" dateStart:text="10-10-2016" dateEnd:text="10-12-2016"/>
                <ListItem quantity:text="15 minute" quantity:color="#090" name:text="Helium" dateStart:text="02-01-2015" dateEnd:text="10-10-2019"/>
                <ListItem quantity:text="25 minute" quantity:color="#090" name:text="Lithium" dateStart:text="01-01-2001" dateEnd:text="01-01-2018"/>
                <ListItem quantity:text="10 minute" quantity:color="#090"  name:text="Hydrogen" dateStart:text="10-10-2016" dateEnd:text="10-12-2016"/>
                <ListItem quantity:text="15 minute" quantity:color="#090" name:text="Helium" dateStart:text="02-01-2015" dateEnd:text="10-10-2019"/>
                <ListItem quantity:text="25 minute" quantity:color="#090" name:text="Lithium" dateStart:text="01-01-2001" dateEnd:text="01-01-2018"/>
            </ListSection>
        </ListView>

This is a part of my tss file:

"ListItem": {
    accessoryType: Titanium.UI.LIST_ACCESSORY_TYPE_DISCLOSURE
}

So if I try to start my application, I can see this:

enter image description here

And this is ok. Now I want to set a ListSection with a data from a database.

So I'm delete from my xml file this code:

<ListItem quantity:text="10 minute" quantity:color="#090"  name:text="Hydrogen" dateStart:text="10-10-2016" dateEnd:text="10-12-2016"/>
                <ListItem quantity:text="15 minute" quantity:color="#090" name:text="Helium" dateStart:text="02-01-2015" dateEnd:text="10-10-2019"/>
                <ListItem quantity:text="25 minute" quantity:color="#090" name:text="Lithium" dateStart:text="01-01-2001" dateEnd:text="01-01-2018"/>
                <ListItem quantity:text="10 minute" quantity:color="#090"  name:text="Hydrogen" dateStart:text="10-10-2016" dateEnd:text="10-12-2016"/>
                <ListItem quantity:text="15 minute" quantity:color="#090" name:text="Helium" dateStart:text="02-01-2015" dateEnd:text="10-10-2019"/>
                <ListItem quantity:text="25 minute" quantity:color="#090" name:text="Lithium" dateStart:text="01-01-2001" dateEnd:text="01-01-2018"/>

And from my controller.js I'm building this code:

function populateTable(){
    var collection = Alloy.createCollection("SocialHistoryDAO");
    collection.fetch();
    collection.forEach(function(e, i, a) {
        items.push({                    
            dateStart : {text : e.get("DateStart")}, 
        name : {text : e.get("DisplayName")},
        dateEnd : {text : e.get("DateEnd")}, 
        quantity : {color:"#090", text : e.get("Quantity")+" "+e.get("UnityMeasure")}               
        }); 
    });
    $.elementsList.sections[0].setItems(items);

}

If I try to start my application I can see a List View never symbol ">" at right of every Items.

How can I fixed it?

Solution

  • There are no ListItems in your code anymore, so adding styling to it won't work of course.

    However, you can just style a Template. So change the identifier and it should work

    ".itemTemplate": {
    accessoryType: Titanium.UI.LIST_ACCESSORY_TYPE_DISCLOSURE
}