Find view in row and change backgroundImage based on index

You must Login before you can answer or comment on any questions.

Im creating a flyout menu, and by default home is active, but if another row is clicked, that row becomes active and home should go to inactive. I can change the background of the selected row easy enough, but I cant figure out how to turn off the previous row or set it to off. I know the index but I'm unclear how to drill down into the view that is nested in the tableRowView to change the background.

this is the function I'm working with

self.createRows = function(title, image) {
        var t = title;
        var row = Ti.UI.createTableViewRow({
            height:44,
            width: Ti.Platform.displayCaps.platformWidth,
            rowId: t,
            backgroundColor: 'transparent'
        });
 
        var rowImage = 'images/cellrowbgoff.png';
        var rowView = Ti.UI.createView({
            height:44,
            width:Ti.Platform.displayCaps.platformWidth,
            backgroundImage: rowImage,
            backgroundRepeat: true,
            rowId: title
        });
 
        var clicked = 0;
        rowView.addEventListener('click', function(e){
            clicked = e.index;  
            rowView.backgroundImage= 'images/cellrowbgon.png';
            Ti.API.info("clicked row "+e.rowData.rowId + 'clicked =>'+ e.index);
        });
 
        var label = Ti.UI.createLabel({
            text: title,
            color:'#b6b6b6',
            font:{fontWeight:'bold',fontSize:14},
            left:10,
            height: Ti.UI.SIZE,
            width:Ti.UI.SIZE
        });
        rowView.add(label);
        row.add(rowView);
        return row;
    }
and its called as such
var LeftMenu = require('views/LeftMenuView').LeftMenu;
        var lm = new LeftMenu();
        var data = [];
 
        //Create Rows
        data.push(lm.createRows('Home', ''));
        data.push(lm.createRows('Settings',''));
Thanks

— asked 1 year ago by matt s
0 Comments

2 Answers

Two ways. Either

  1. Create a separate array containing each rowView then you can access it by index. or
  2. Look at the children property of the tableviewrow and access it from there
— answered 1 year ago by Nick Milner
answer permalink
1 Comment
  • Nick -

    I tried pushing the rows in a a custom collection, and I keep track of the previous view, however It's not changing when I do this.

    function setClicked(click) {
            clicked = click;
        }
     
    rowView.addEventListener('click', function(e){
                rowView.backgroundImage= 'images/cellrowbgon.png'; // set background active 
                var lastView = menuItem[clicked].children; // get last view
                lastView.backgroundImage = 'images/cellrowoff.png';
                Ti.API.info('lastView=>'+ JSON.stringify(lastView));
     
                // After changing last clicked set the clicked screen
                setClicked(e.index); 
                Ti.API.info('clicked=>'+ clicked);
            });

    — commented 1 year ago by matt s

I'm a dumb @ss. I need to do this

var lastView = menuItem[clicked].children[0];
lastView.backgroundImage = 'images/cellrowbgoff.png';

Your Answer

Think you can help? Login to answer this question!