1. #1
    Sencha User
    Join Date
    Dec 2011
    Posts
    22
    Vote Rating
    0
    roykrish is on a distinguished road

      0  

    Default Unanswered: removeAll() not working with dockedItems in Grid

    Unanswered: removeAll() not working with dockedItems in Grid


    Hi,

    In a border layout I am trying to load a grid panel in the center region, dynamically. I have a toolbar in the 'east' region and a button in that toolbar, 'List of Projects'. When I hit that button first time it loads the grid properly in center region. When I hit 2nd or 3rd time it does not render the UI properly.

    My Grid panel has a docked item which contains the paging toolbar. If I remove that dockedItem everything works fine. Problem starts when I include that docked item.

    Event listener for "List Of Projects" button --

    handler: function(){
    var content = Ext.getCmp('portal-container');
    content.removeAll();
    content.add(Ext.ComponentMgr.create({
    itemId: 'projectlist',
    xtype: 'proectjlist',
    border: true
    }));
    }

    It seems content.removeAll() doesn't work proeprly if there is a dockedItem present in the Grid Panel. What am I doing wrong ?

    Please Help.

    Thank You

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    What version are you using as this simple testcase works fine:

    Code:
    new Ext.container.Viewport({
        layout : 'border',
        items  : [
            {
                region : 'center',
                layout : 'fit',
                items  : [
                    {
                        xtype       : 'panel',
                        dockedItems : [
                            {
                                xtype : 'toolbar',
                                dock  : 'bottom',
                                items : [
                                    {
                                        text : 'Test'
                                    }
                                ]
                            }
                        ]
                    }
                ]
            },
            {
                region      : 'east',
                width       : 400,
                dockedItems : [
                    {
                        xtype : 'toolbar',
                        dock  : 'top',
                        items : [
                            {
                                text : 'Remove',
                                handler : function(btn) {
                                    var viewport = btn.up('viewport'),
                                        center   = viewport.down('container[region=center]');
    
                                    center.removeAll();
                                }
                            }
                        ]
                    }
                ]
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Dec 2011
    Posts
    22
    Vote Rating
    0
    roykrish is on a distinguished road

      0  

    Default


    Thank you very much for replying.

    The version I am using is 4.0.7.

    I am new with Sencha, and probably that is stopping me from understanding the solution. My border layout is present in my controller and looks like this..

    Code:
    items: [
    									{
    										region: 'north',
    										xtype : 'paasactions',
    										flex: 1,
    										height: '7%'
    									},
    									{				
    										xtype : 'navigation',					
    										region: 'west',
    										flex: 1,
    										width: '12%',
    										border:true
    									},
    									{		
    										id: 'portal-container',
    										xtype: 'overview',
    										region: 'center',
    										layout: 'fit',
    										flex: 1,
    										width: '88%',
    										border:false,
    										autoscoll:true
    									}
    							   ]
    In one of my views I have Grid panel and the docked item(paging toolbar) is a part of that Grid Panel. I click a button, present in my toolbar(present in the north region) to load that Grid panel into the center region. The problem is If I hit the button 2nd time, the screen doesn't show up properly. When I hit that button it gets a handle on that center region and calls removeAll() for that region.
    When I hit the button first time to load the Grid, there is only a simple panel at the center region. removeAll() works pretty fine that time. 2nd time when I hit the button then the Grid is already there with the docket item. Then removeAll() doesn't work proeprly.

    What am I doing wrong here ?

  4. #4
    Sencha User
    Join Date
    Sep 2011
    Posts
    2
    Vote Rating
    0
    lmanik is on a distinguished road

      0  

Thread Participants: 2