How to add empty rows to the ExtJS Grid?

Question

I have the grid with paging. Every page has max 10 rows. Like this:

I set gradient background for .x-grid3-scroller selector in CSS. Everything is fine, while there is 10 items in the DirectStore. But if there is less items than 10 I have that problem:

If set striped background for .x-grid3-scroller there will be no borders in columns.

How to add empty rows to the grid to fit grid to the bottom?

Answer 1

After store is load (use load listener) check how many records are there (getCount() method) and add (add() method) 10 - store.getCount() empty records.

store.on('load', function(store) {
  var records = new Array();
  for(var i = 10 - store.getCount(); i > 0; i--) {
     records.push(new store.recordType(/*you might need to provide default data here*/))
  }
  store.add(records);
});