Hybrid View

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    31
    Vote Rating
    0
    Alexei Ptitchkin is on a distinguished road

      0  

    Default Problem with Grid&Toolbar in tabPanel

    Problem with Grid&Toolbar in tabPanel


    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.

  2. #2
    Sencha User
    Join Date
    Apr 2012
    Posts
    31
    Vote Rating
    0
    Alexei Ptitchkin is on a distinguished road

      0  

    Default


    It's turn out that for any reason

    store: 'products.Products' was not initialized.

    I had to make dirty trick, i.e. include

    Code:
    var localStore = Ext.create('Fast.store.products.Products', {
        extend: 'Ext.data.Store',
        requires: ['Ext.data.reader.Json'],
        model: 'Fast.model.products.ProductModel',
    ...
    ...
    });
    right into ProductGrid class.

    I really don't understand why Grid can't see it's own store?