Redrawing the screen upon change of orientation when the window has a background image

This is probably a bit of a newbie question as I am currently learning Titanium and JS for my first app, so apologies if I am going off in completely the wrong direction! There are many questions I have here, but I'll try and keep it to 1 which is:

Is there a way of clearing the contents of a ScrollView on orientation change when the containing Window has a background image?

Context:

I am trying to create a window that has a ScrollView, which in turn contains a grid of small fixed-width Views - tiled across and down the page. In the background the containing window has an image.

When the orientation changes I redraw the window with however many of the fixed-width columns are now able to fit on the screen. This seems to work fine when the Window has a simple background colour - the window clears and redraws correctly. However if I give it a background image instead the old 'tiles' are left on the screen when the orientation changes - they have changed orientation but shouldn't be there at all. The new tiles are then drawn over the top which looks a mess.

I just know someone is going to say that there are far easier ways to do tiling and re-orientation than this. :-) Happy to discover how if so!

I think I am using SDK 2.1 (I say 'think' as only 2.1.0-2.1.2 are in my project build path, but the compiler confusingly says 2.0.1). I have currently only tried this on Android (2.3.3 and 4.0 - emulator and devices), not iOS.

Things I have thought of so far and failed with:

Tried changing the background image when orientation changed. No effect to the tiles. Tried removing the ScrollView completely from the window and re-adding it - just gave an error message saying (paraphrasing) view not found. Tried giving the ScrollView the background image instead. No effect.

Code example:

Window created like so:

btnSubmit.addEventListener('click', function(e) {
 
            globs.GV.tabs.currentTab.open(new TileList({
                title : 'My Tile List',
                //backgroundColor: '#009999',
                backgroundImage: 'background.jpg',
            }));
 
    });

The 'TileList' code, cut-down to what is relevant:

/*jslint white:true vars:true plusplus:true  */
 
var globs;
 
TileList.prototype.getTableData = function(instance, callback) {"use strict";
 
 
   // getting data
 
};
 
 
TileList.prototype.showTableData = function(instance, json_data) {"use strict";
 
    var i = 0;
 
 
    var scrollView = Titanium.UI.createScrollView({
 
        layout: 'absolute',
       showVerticalScrollIndicator: true,
       scrollType: 'vertical'
 
    });
 
    instance.add(scrollView);
 
 
    for ( i = 0; i < json_data.length; i++) {
 
       // add tiles - obviously a lot more to this loop's code then just a createView, 
       //  but I think this is all you need to see what I am trying to do
     var containerView = Titanium.UI.createView({
            width: boxWidth,
            height: boxHeight,
 
            left: xpos + "dip",
            top: ypos+ "dip",
            backgroundColor: 'Black',
            borderColor: 'White',
            tmpName : strName,
            tmpID : json_data[i].Id,
            srctype: 'view'
        });
 
    }
 
};
 
 
function TileList(args) {"use strict";
 
    var instance = Ti.UI.createWindow(args);
    this.win = instance;
    var self = this;
 
    this.orientationCallBack = function(e){
 
        //self.win.remove(self.win.children[0]);
        //self.win.children[0] = null;
        self.showTableData(self.win, self.jsonData);
    };
 
 
    Ti.Gesture.removeEventListener('orientationchange', self.orientationCallBack);
 
    Ti.Gesture.addEventListener('orientationchange', self.orientationCallBack);
 
    this.getTableData(instance, function(instance, json_data) {
        self.jsonData = json_data;
        self.showTableData(instance, json_data);
    });
 
 
    return instance;
}
 
module.exports = TileList;

I'm a little unsure of how to picture this in my head. But have your tried adding a view right under the window and setting the background image of that view instead of having a window background image?

So: Window > View> ScrollView > Tiled View

This view if created like this

var self = Ti.UI.createView({
    backgroundImage: 'something.jpg',
});

The view should automatically fill all available space but you could also put the Ti.UI.FILL constant into the width and height.

OK, I think I've figured out the answer. Having a background picture was a bit of a red herring, it just so happened that I first noticed it when I'd added the picture.

It appears that you do need to remove the ScrollView from the Window first if you want to draw another over the top. I had obviously tried this before, but the reason it wasn't working was because Titanium was reporting that the Window had 0 (zero) children, so when I asked it to remove 'children[0]' it couldn't find the ScrollView. Using the getChildren() method didn't work either.

Fiddling around with the debugger I noticed that the property that contains the child views of a window is actually called '_children', which is different from the online docs. When I use this the old ScrollView is removed, and the new one drawn on the window fine, regardless of whether there is a background image or not.

Just add the following code before you create your ScrollView (note: JSLint will moan about the 'dangling' underscore:

if (instance._children.length > 0){
       instance.remove(instance._children[0]);
 }

This is true in Titanium SDK 2.0.2, Windows, using Android 4.0.3. I've not tested in anything else yet. I downgraded from SDK 2.1.2 as I couldn't get the debugger to fire up with that version.

Now of course I've just got to figure out whether this is the best way of doing tiling anyway. :-)