Appcelerator studio change listitem backgroundcolor on click

982 views Asked by At

Please I need help with this subject, I have a listview on appcelerator studio like this:

<ListView id="lvPropuestas" defaultItemTemplate="plantilla">
        <Templates>
            <ItemTemplate name="plantilla">                                 
                    <Label bindId="bindGarantia" class="columnG columnContentStyle"></Label>
                    <Label bindId="bindPropuesta" class="columnProp columnContentStyle"></Label>
                    <Label bindId="bindMonto" class="columnM columnContentStyle"></Label>
                    <Label bindId="bindPrima" class="columnPrim columnContentStyle"></Label>
                    <Button bindId="btnNavega" class="btnTabla" onClick="DetallePropuesta">></Button>
                    <!-- 
                    -->                 
            </ItemTemplate>
        </Templates>
        <HeaderView>
            <View backgroundColor="#E2DBD3" height="35dip">
                <Label id="headerG" class="titleStyle">GARANTIA</Label>
                <Label id="headerProp" class="titleStyle">PROPUESTAS</Label>
                <!--
                -->
                <Label id="headerM" class="titleStyle">MONTO</Label>
                <Label id="headerPrim"  class="titleStyle">PRIMA</Label>

            </View>
        </HeaderView>
        <ListSection>

        </ListSection>
    </ListView>

This section its updated on a web service call*, so in my js I declare a eventlistener like this:

$.lvPropuestas.addEventListener('itemclick',seleccionFila);

Finally my function is like this:

function seleccionFila(e){
    var item = e.section.getItemAt(e.itemIndex);
    item.properties.color ='#33CCCC';
    e.section.updateItemAt(e.itemIndex, item); }

I tried to change the background color of the listitem, but at the moment of the click I catch the item but in the docs from appcelerator they "change" some properties like the background color of the complete row but, this way raise an error of properties is not an object, some help?

1

There are 1 answers

0
ChrisID58 On BEST ANSWER

Ok I find a way to do this and i really hope this will help a little, first in the view i put a view that contains all the content of the row, and put it a bindId like this:

<View bindId="bindView">
    <Label bindId="bindGarantia" class="columnG columnContentStyle"></Label>
    <Label bindId="bindPropuesta" class="columnProp columnContentStyle"></Label>
    <Label bindId="bindMonto" class="columnM columnContentStyle"></Label>
    <Label bindId="bindPrima" class="columnPrim columnContentStyle"></Label>
    <Button bindId="btnNavega" class="btnTabla" onClick="DetallePropuesta">></Button>
    <!-- 
    --> 
</View>

Then in the js controller just change the backgroundColor of the view with its bindId property like this:

function seleccionFila(e) {
    var item = e.section.getItemAt(e.itemIndex);
    item.bindView.backgroundColor = "#efefef";
    e.section.updateItemAt(e.itemIndex, item);
}

and that's all