Find view in row and change backgroundImage based on index

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({
            width: Ti.Platform.displayCaps.platformWidth,
            rowId: t,
            backgroundColor: 'transparent'

        var rowImage = 'images/cellrowbgoff.png';
         var rowView = Ti.UI.createView({
            backgroundImage: rowImage,
            backgroundRepeat: true,
            rowId: title

        var clicked = 0;
        rowView.addEventListener('click', function(e){
            clicked = e.index;    
            rowView.backgroundImage= 'images/cellrowbgon.png';
  "clicked row "+e.rowData.rowId + 'clicked =>'+ e.index);

        var label = Ti.UI.createLabel({
            text: title,
            height: Ti.UI.SIZE,
        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', ''));


2 Answers

  • Two ways. Either

    1. Create a separate array containing each rowView then you can access it by index.
    2. Look at the children property of the tableviewrow and access it from there
    — answered 3 years ago by Nick Milner
    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';
        'lastView=>'+ JSON.stringify(lastView));
                  // After changing last clicked set the clicked screen
        'clicked=>'+ clicked);

      — commented 3 years 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';