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?

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar