How to add Controls programatically in titanium alloy

Question

I am trying to add controls programmatically in titanium alloy. I did the fallowing code but it not working i don't know why??

XML

<Alloy>
  <Window class="container">
        <View id="TextOrders">
        <ScrollView id="scrollView" showVerticalScrollIndicator="true" showHorizontalScrollIndicator="true" >

        </ScrollView>
      </View>
    </Window>
</Alloy> 

Controller

var args = arguments[0] || {};
var TextOrders = Ti.UI.createView({
  backgroundColor:'white'
});
function createRow(i) {
  var row = Ti.UI.createView({
    backgroundColor: 'white',
    borderColor: '#bbb',
    borderWidth: 1,
    width:'100%', height: 70,
    top: 0, left: 0
  });
  var inputTextField = Ti.UI.createTextField({
    hintText: 'Enter value ' + i,
    keyboardType: Ti.UI.KEYBOARD_NUMBERS_PUNCTUATION,
    top: 10, left: '10%',
    width: '80%', height: 60
  });
  row.add(inputTextField);
  return row;
}
var scrollView = Ti.UI.createScrollView({
  bottom:120,
  contentHeight: 'auto',
  layout: 'vertical',
   backgroundColor: 'red',
   height:'58%'
});

for(var i = 0; i <= 20; i++){
    var row = createRow(i);
    scrollView.add(row);
}
TextOrders.add(scrollView);

tss

".container" : {
  backgroundColor:"white"
}
"#TextOrders":{
    width:'100%',
    height:'57%',
    borderColor:'red',
    borderWidth:'1px',
    top:'0px',
}
"#scrollView":{
    width:'80%',
    borderColor:'blue',
    borderWidth:'1px',
    top:'0px',
    height:'80%',
}

It does not giving me any error but controls is not getting added.

Answer 1

TextOrders.add(scrollView);

should be:

$.TextOrders.add(scrollView);