ExtJS4: paggingtoolbar refresh button is not working propertly

The refresh button wasn't refreshing when I was clicking it. After hours of searching on the web I finally got the problem. The initial code was a definition of a gridpanel:


Ext.define('WebMonitorClass.view.BodegaGridPanel', {    
    extend: 'Ext.grid.Panel'
    ,alias: 'widget.bodegaGridPanel'

...
...
...
,store: Ext.create('WebMonitorClass.store.BodegasCrudGridPanelStore')
,bbar: {
            xtype: 'pagingtoolbar'
            ,dock: 'bottom'
            ,store : Ext.create('WebMonitorClass.store.BodegasCrudGridPanelStore')                                   
        }
...
...
...

}

The way to make it work is instantiating the store an setting it to the grid store and to the paging toolbar. All this occurs in the initComponent method  :

Ext.define('WebMonitorClass.view.BodegaGridPanel', {    
    extend: 'Ext.grid.Panel'
    ,alias: 'widget.bodegaGridPanel'
...
...
...
,initComponent: function() {
        
           this.store = Ext.create('WebMonitorClass.store.BodegasCrudGridPanelStore'); // initialize store
        
        this.bbar = Ext.create('Ext.toolbar.Paging', {
            // se obtiene error Uncaught TypeError: Cannot read property 'id' of undefined             
            //xtype: 'pagingtoolbar'
            dock: 'bottom'
            ,store : this.store // setting the previously initialized store to the pagging toolbar
            ,displayInfo: true
            ,displayMsg: 'Displaying topics {0} - {1} of {2}'
            ,emptyMsg: "No topics to display"
            ,listeners: {                
                afterrender: function (component){
                    //component.down('#refresh').hide()
                }
            }                              
            });
        
        this.callParent();
        
    }
...
...
...

}

Resource:
http://try.sencha.com/extjs/4.1.1/community/extjs4-mvc-paging-grid/