Results 1 to 2 of 2

Thread: Problem adding Grid Panel to container Border Layout

  1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    20

    Question Problem adding Grid Panel to container Border Layout

    I am having a problem when I attempt to repeatedly add a grid panel to
    a container's center region having a border layout.


    I have created a Viewport which has a border layout.


    In the west region, there is a tree panel. When the leaf node is selected
    for the first time, a grid panel is displayed correctly in the center region.
    When the leaf node is reselected, the grid panel is redisplayed incorrectly
    and the following error message is output to console:


    Uncaught TypeError: Cannot read property 'style' of undefined


    1) Please would you be able to indicate how to fix this bug.
    2) I haven't attached all the code I'm using (I've tried to narrow it down) and
    there may another problem which also causes this error - so any general advice
    on e.g. what properties/configs/layouts need to be set when adding grid panel
    to border layout region would be very welcome.




    Code:
    Ext.define('Users', {
        extend: 'Ext.data.Store'    
    });
            
    Ext.define('GPanel' ,{
        extend: 'Ext.grid.Panel',
        title: 'Events',
        store: userStore,
        id: 'grd',
        itemId: 'centerPanel',
        columns: [
            {
                text: 'Name',
                dataIndex: 'name'
            },
            {
                text: 'Birth Date',
                dataIndex: 'date'
            }
        ],
        dockedItems: [
            {
                xtype: 'toolbar',
                dock: 'top',
                items: [            
                    { 
                        xtype: 'datefield', 
                        fieldLabel: 'Filter', 
    
    
                    }
                ]    
            }
        ]    
    });
    
    
    
    
    var userStore;
    var pan;
    
    
    var rootNode = {
        text: 'Upshot',
        expanded: true,
        children: [
            {
                text: 'Unmatched Events',
                id: 'ue',
                leaf: true
            }
        ]                
    }
    
    
    var tree = {    
        xtype : 'treepanel',
        id : 'treepanel',
        autoScroll : true,
        multiselect: true,
        root : rootNode,
        listeners: { 
            itemclick : function(view,rec,item,index,eventObj) {  
                if(rec.get('id')=='ue') { 
                    var centerRegion = Ext.getCmp('centerRegion');
                    var centerPanel = centerRegion.getComponent('centerPanel');
                    centerRegion.remove(centerPanel, true);
                    pan = Ext.create('GPanel');
                    centerRegion.add(pan);
                }
            }
        } 
    }
    
    
    Ext.application({
    
    
        launch: function () {
    
    
            Ext.create('Ext.container.Viewport', {
                title: 'Unmatched Events',
                layout : 'border',
                items : [
                    {
                        title : 'West Panel', 
                        region : 'west',
                        collapsible : true,
                        collapseMode : 'mini',
                        resizable: true,
                        width : 200,
                        layout: 'fit',
                        items: tree
                    },
                    {
                        xtype : 'container',
                        region : 'center',
                        layout : 'fit',
                        id : 'centerRegion',
                        autoEl : {},
                        items : {
                            title : 'Center Region',
                            id : 'centerPanel',
                            html : 'I am disposable',
                            frame : true
                        }
                    }
                ]
            });
        }    
    });

    kind regards,
    Simon

  2. #2
    Sencha User
    Join Date
    Nov 2011
    Posts
    20

    Default problem resolved (I think)

    Hello,

    Thanks to a reply from an earlier post, by somebody else on a similar theme, I seemed to have resolved this by not using dockeditems and instead using bbar and tbar.

    kind regards,
    Simon

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •