How do I show/hide images in Enyo?

Question

I am using HP webOS 3.0 and the Enyo framework.

I have simple question that how can I show and hide images on click of a button. I have 2 images and I want to show images on click of one button and hide on click of another button.

I have two panes called left pane and right pane on a single view. I have around 10 items on left pane.

On each of the item click appropriate view is called on right pane.

I am doing it with following code.

   showTaskView: function(){
      this.$.rightPane.selectViewByName("taskView");
   },

Now I want to know how can access the control's property in the main view containing both left pane and right pane.

For example, I want to show / hide image in the taskView displayed on the right pane on click of the button that is neither in the left pane or right pane but on the header part of the view that contains both left and right pane.

It is not allowing me to access the control's image.setSrc method from the main view. I have tried it with the following code.

editTask: function() {
   this.$.task.image.setSrc("images/image2.jpg");
}

and

editTask: function() {
   this.$.image.setSrc("images/image2.jpg");
}

It gives me the following error:

Cannot read property 'setSrc' of undefined

Answer 1

With VirtualList, your hash will only reference the currently "selected" row. "selected" being either the row receiving an event or one explicitly selected using prepareRow(). If you want to change every row, you should set a property and call refresh() on the list to cause it to rerender.

The below should work (I think ...)

setupRow: function(inSender, inIndex) {
                 var row = this.data[inIndex];
                 if (row) {
                    this.$.caption1.setContent("Greet a " + row.task + ":");
                    this.$.star.setSrc("images/grey-star.png");
                    if(this.hideStart) this.$.star.hide();
                    this.$.caption2.setContent(row.assignto);
                    return true;
                 }
               },
               buttonClick: function(){
               this.hideStar = true;
               this.$.myVirtualList.refresh();
            }