Instantiating grids at the wrong time causes scroll bars to silently disappear

[lisper]

I'm not sure if this is 1) a bug, 2) missing diagnostics, 3) a documentation problem or 4) a case of PEBKAC, but I found this behavior highly surprising. It took me a whole day to figure out what was going on. Code:

var data1 = []
for(var i = 0; i<20; i++) data1.push([i])


function mkgrid() { return Ext.create('Ext.grid.Panel', {
  store: Ext.create('Ext.data.ArrayStore', {
    fields: [{name: 'X'}],
    data: data1
  }),
  columns: [{text: 'X', dataIndex: 'X', flex: 1}],
  height: 150,
  width: 150
})};


var grid1 = mkgrid()


Ext.application({
  launch: function() {
    Ext.create('Ext.container.Viewport', {
      items: [grid1, mkgrid()],
      autoScroll:true
    })
  }
});

This creates two identical grids, but one has scroll bars and the other doesn't. No errors are generated.