grid.bindStore() does not allow Infinite Scrolling - Ext JS - extjs

Question

I'm using a buffered store/infinite scrolling on a grid I defined in my view folder without defining a store.
var grid = Ext.define('MyApp.view.metadata.ResultGrid' ,{
extend : 'Ext.grid.Panel',
alias : 'widget.resultgrid',
id : 'mygrid',
//columns, etc.
I then instantiate it on Ext.application with
{ xtype: 'resultgrid', width: '85%', hidden: true}
Then, in my controller I create my store...
var store = Ext.create('Ext.data.Store', {
storeId : 'resultsetstore',
model : model,
buffered : true,
pageSize : itemsPerPage, //50
autoLoad : true,
leadingBufferZone : 100,
remoteSort : true,
//etc.
...then reconfigure my store to the grid within that controller:
Ext.getCmp('mygrid').reconfigure(store);
Ext.getCmp('mygrid').show();
With this method, the records get loaded to my grid, but those records get limited to the pageSize and I lose the infinite scrolling ability.
Everything works fine if I create a random grid right after I create my store within the Controller. However, I want to keep my grid defined in it's own folder and use xtype to create it in a specific location in my app (between a mess of panels/components).
This works:
var grid = Ext.create('Ext.grid.Panel', {
title : 'Test Data',
loadMask : true,
store : store,
This doesn't:
var grid = Ext.create('Ext.grid.Panel', {
title : 'Test Data',
loadMask : true,
//...
});
grid.reconfigure(store)
I can't use the first method within my grid definition because the store isn't defined until a User submits a search form.
Is there a way to keep my grid defined in it's own folder, use my store, and keep infinite scrolling functionality without putting everything into one giant file?

Answer 1

I instantiated my grid right after my store, then added it to the panel I wanted it in.
var app = Ext.getCmp('my_container');
app.add({
xtype: 'resultgrid', width: '85%', region: 'center', height: 400, collapsible: false, store: store
});