Hi all. I'm newbee and trying to follow examples\app\feed-viewer project.
Using : Ext 4.0

Here is my files:

\app.js

Code:
Ext.application({
    name: 'Fast',
    // Define all the controllers that should initialize at boot up of your application
    controllers: [],
    autoCreateViewport: true
});
\app\view\Viewport.js
Code:
Ext.define('Fast.view.Viewport', {
    extend: 'Ext.container.Viewport',

    requires: [
        'Fast.view.Viewer',
        'Ext.layout.container.Border'
    ],

    layout: 'border',

    items: [{
        region: 'center',
        xtype: 'viewer'
    }
    ]
});
\app\view\Viewer.js

Code:
Ext.define('Fast.view.Viewer', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.viewer',
    
    requires: [
        'Fast.view.products.View',
        'Fast.view.dealers.View'
    ],
    
    activeItem: 0,
    margins: '5 5 5 5',
    
    cls: 'preview',
    
    initComponent: function() {
        this.items = [{iconCls: 'tabs', xtype: 'productsView',    title: 'Products'}];
        this.callParent(arguments);
    }
});
\app\view\products\View.js

Code:
Ext.define('Fast.view.products.View', {
    extend: 'Ext.tab.Panel',
    alias: 'widget.productsView',
    
    requires: ['Fast.view.products.SetupView'],
    
    activeItem: 0,
    margins: '5 5 5 5',
    
    initComponent: function() {
        this.items = [{iconCls: 'tabs', xtype: 'productsSetupView',title:'SetUp',id:'productsSetUp'}];
        this.callParent(arguments);
    }
});
\app\view\products\SetupView.js

Code:
Ext.define('Fast.view.products.SetupView', {
    requires:    'Fast.view.products.ProductGrid',
    extend:        'Ext.Panel',
    alias:        'widget.productsSetupView',
    //html:        'Products Setup View content'
    items: [{xtype: 'ProductGrid'}]
   });
and finally component which cause the problem
\app\view\products\ProductGrid.js
Code:
Ext.define('Fast.view.products.ProductGrid' ,{
     extend:'Ext.grid.Panel',
     alias :'widget.ProductGrid',
     requires:'Ext.toolbar.Toolbar',
     columnLines: true,
     title : 'Product Set Up',
     store: 'products.Products',
    
    columns: [ {text:'Product Id',        hidden:true,flex:1,sortable:true,dataIndex: 'id'}, 
        {text:'Item Name',        flex:1,sortable : true,dataIndex: 'itemName'},
        {text:'Item Setup Status',    flex:1,sortable : true,dataIndex: 'status'}
        ],

    initComponent: function() {
         Ext.apply(this, { 
            dockedItems:[
            {
            xtype: 'toolbar',
            dock:'top',
            items: [{iconCls: 'icon-add', itemId: 'create',text: 'Create',action: 'add'},
                {iconCls: 'icon-copy',itemId: 'copy',text: 'Copy',action: 'copy'}]
            },
                {
            xtype: 'pagingtoolbar',
            dock:'bottom',
            store: 'products.Products',
            displayInfo: true,
            displayMsg: 'Displaying Products {0} - {1} of {2}'+'&nbsp &nbsp &nbsp',
            emptyMsg: "No Product to display"}
            ]
            });
        this.callParent(arguments);
    }
}
);

I've skip store and model mosly because ProductGrid.js is taken from prototype-project and works fine there.


1.
During loading process Fast.view.products.ProductGrid (my guess) raise the error
Code:
item is undefined
    Ext.util.Observable#addManagedListener(item=undefined, ename="load", fn=function(), scope=Object { initialConfig={...}, xtype="gridview", headerCt={...}, more...}, options=Object { scope={...}, load=function()})ext-al...ents.js (line 19900)
    Ext.util.Observable#addManagedListener(item=undefined, ename="load", fn=undefined, scope=undefined, options=Object { scope={...}, load=function()})ext-al...ents.js (line 19886)
    Ext.view.Table#initComponent()
if I comment this.callParent(arguments); in ProductGrid.initComponent I have all tabs on screen, but error

Code:
me.dockedItems.insert is not a function
    Ext.panel.AbstractPanel#addDocked(items=[Object { initialConfig={...}, title="Product Set Up", orientation="horizontal", more...}], pos=0)ext-al...ents.js (line 47636)
    Ext.panel.Panel#updateHeader(force=undefined)
Any idea what I'm doing wrong?

2.
Should I set property requires:'Ext.toolbar.Toolbar' in ProductGrid.js?

Thank you in advance.