Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-236 in a recent build.
  1. #1
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default DockLayout attempts to manipulate DOM element after it's been destroyed

    DockLayout attempts to manipulate DOM element after it's been destroyed


    DockLayout's afterRemove removes classnames from the item

    But if the remove also destroyed which is the default, there will BE no el.

    Test case to drop into the examples directory.

    It shows an app, and then calls destroy() on it after one second to show the error.

    If you break on errors in Chrome you can see that item.isDestroyed is true. That's because removeDocked has destroyed the items before calling afterRemove.

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" href="../resources/css/sencha-touch.css" type="text/css">
    <script type="text/javascript" src="../ext-touch-debug.js"></script>
    <script type="text/javascript">
    Ext.setup({
        onReady: function() {
            var app = new Ext.Panel({
                fullscreen: true,
                layout: 'card',
                items: [{
                    html: 'Hello World'
                }, {
                    html: 'Second card',
                    dockedItems: [{
                        xtype: 'toolbar',
                        title: 'Top',
                        dock: 'top'
                    }]
                }]
            });
            setTimeout(function() {
                app.destroy();
            }, 1000);
        }
    });
    </script>
    </head>
    <body></body>
    </html>

  2. #2
    Sencha - GXT Dev Team BrendanC's Avatar
    Join Date
    Aug 2010
    Posts
    534
    Vote Rating
    3
    BrendanC is on a distinguished road

      0  

    Default


    Thanks for the bug report.

  3. #3
    Sencha - Architect Dev Team aconran's Avatar
    Join Date
    Mar 2007
    Posts
    9,365
    Vote Rating
    128
    aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold aconran is a splendid one to behold

      0  

    Default


    We've placed an additional check to make sure the component hasn't been destroyed before invoking afterRemove.

    Looking forward we are reviewing the need for two separate onRemove/afterRemove methods.
    Aaron Conran
    @aconran
    Sencha Architect Development Team

  4. #4
    Sencha User
    Join Date
    Apr 2011
    Location
    Brittany, France
    Posts
    82
    Vote Rating
    0
    jmclem is on a distinguished road

      0  

    Default


    Hi,

    I seem to be facing this problem; I tried to follow the instructions at http://www.sencha.com/blog/sencha-to...-memory-usage/ for optimising DOM Usage.

    However, whenever I have some dockedItems on a panel in a cardstack, I get the JS error "Uncaught TypeError: Cannot read property 'parentNode' of undefined" when trying to recreate the panel (i.e. first creation ok, remove after switching ok, recreating after switching back fails).

    There is no problem with panels without dockedItems.

    I am using the 1.1.0 version of Sencha Touch.

    Is there any workaround or override for this?

    Thanks,

    Jean-Marie.

  5. #5
    Ext GWT Premium Member
    Join Date
    Apr 2009
    Location
    NYC
    Posts
    112
    Vote Rating
    1
    stan229 is on a distinguished road

      0  

    Default


    Hitting the same issue. I'm removing & destroying panels on a "back" event and then when I want to re-open that panel "I'm getting the Uncaught TypeError: Cannot read property 'parentNode' of undefined" in the Ext.layout.Layout.Ext.extend.isValidParent method on the toolbar element because it's marked already as destroyed and wasn't re-initialized.

  6. #6
    Ext GWT Premium Member
    Join Date
    Apr 2009
    Location
    NYC
    Posts
    112
    Vote Rating
    1
    stan229 is on a distinguished road

      0  

    Default


    I found a working around by calling this.addDocked(//dockObject(s)) in the afterrender event of the panel.

  7. #7
    Sencha User
    Join Date
    Jun 2011
    Posts
    14
    Vote Rating
    0
    luisvsilva is on a distinguished road

      0  

    Default Workaround for detroy bug

    Workaround for detroy bug


    Hi Stan229,

    Would you provide some details on how you did to workaround this problem? That would be awesome.

    Thanks

    Luis

  8. #8
    Ext GWT Premium Member
    Join Date
    Apr 2009
    Location
    NYC
    Posts
    112
    Vote Rating
    1
    stan229 is on a distinguished road

      0  

    Default


    Well lets say you have a panel
    Code:
    var myPanel = new Ext.Panel({
        id: 'MyPanel',
        dockedItems: [{
            xtype: 'toolbar',
            title: 'Hello World'
        }]
    });
    What you would do is the following:
    Code:
    var panel = new Ext.Panel({
        id: 'MyPanel',
        listeners: {
            afterrender: {
                fn: function () {
                    this.addDocked([{
                        xtype: 'toolbar',
                        title: 'Hello World'
                    }]);
                }
            }
        }
    });

  9. #9
    Sencha User
    Join Date
    Jun 2011
    Posts
    14
    Vote Rating
    0
    luisvsilva is on a distinguished road

      0  

    Wink Thanke mate

    Thanke mate


    Thanks mate, you saved my life!!!! And now I understand what is going on. If you declare your docks in the config object they become somehow associated with the class at a static level, so when you destroy the toolbars in the instance you are actually destroying them in the object blueprint (class) so in the next intanciations it wont be there, your method didnt work with me though cause after render is to late if you say want to create the panel just before a card slide (it was mucking up the animation) so what I did was:

    PHP Code:
    var panel = new Ext.Panel({     
        
    id'MyPanel',
        
    initComponent: function() {
            
    this.addDocked([{
             
    xtype'toolbar',                     
             
    title'Hello World'                 
             
    }]);     
        } 
    }; 
    And from now on I am going to do this with all the nested containers in my panels.

    Not sure if this is the expected behaviour or a bug.

    Thanks Again

  10. #10
    Sencha User
    Join Date
    May 2011
    Posts
    8
    Vote Rating
    0
    mpacific is on a distinguished road

      0  

    Default Re-initializing a panel with a toolbar

    Re-initializing a panel with a toolbar


    Hey all,

    I found what appears to be a bug with re-initializing a panel with a toolbar after it has been destroyed.

    The following panel code gives me an error after the panel has been destroyed and then re-initialized
    Code:
    var testPanelHome = {
    	title: 'Test Panel',
    	id: 'testPanelHome',
    	initComponent: function() {
    		this.on('deactivate', function(thisEl) {
    				thisEl.destroy();
    		});
    
    		viewport.superclass.initComponent.call(this);
    	},
    	dockedItems: [{
    		xtype: 'toolbar',
    		id: 'testPanelHomeToolbar',
    		dock: 'top',
    		items: [{
    			xtype: 'searchfield',
    			placeHolder: 'Search',
    			name: 'test_search'
    		},
    		{
    			xtype: 'spacer'
    		},
    		{
    			xtype: 'button',
    			ui: 'forward',
    			text: 'Search',
    		}]
    	}],
    	defaults: {
    		xtype: 'button',	
    		width: '75%',
    		cls: 'test-home-button'
    	},
    	items: [{
    		text: 'Button 1'
    	},
    	{
    		text: 'Button 2'
    	}]
    }
    The error is "TypeError: Result of expression 'dom' [undefined] is not an object." in sencha-touch-debug-w-comments.js line 43539

    But this workaround works just fine
    Code:
    var testPanelHome = {
    	title: 'Test Panel',
    	id: 'testPanelHome',
    	initComponent: function() {
    		this.on('deactivate', function(thisEl) {
    				thisEl.destroy();
    		});
    
    		viewport.superclass.initComponent.call(this);
    	},
    	dockedItems: [],
    	listeners: {
    		beforeactivate: function() {
    			var toolbar = {
    				xtype: 'toolbar',
    				id: 'testPanelHomeToolbar',
    				dock: 'top',
    				items: [{
    					xtype: 'searchfield',
    					placeHolder: 'Search',
    					name: 'test_search'
    				},
    				{
    					xtype: 'spacer'
    				},
    				{
    					xtype: 'button',
    					ui: 'forward',
    					text: 'Search',
    				}]
    			}
    			
    			this.addDocked(toolbar);
    		}
    	},
    	defaults: {
    		xtype: 'button',	
    		width: '75%',
    		cls: 'test-home-button'
    	},
    	items: [{
    		text: 'Button 1'
    	},
    	{
    		text: 'Button 2'
    	}]
    }

Similar Threads

  1. Replies: 2
    Last Post: 1 Oct 2010, 7:00 PM
  2. manipulate a HTML select element
    By xun in forum Community Discussion
    Replies: 5
    Last Post: 23 Sep 2010, 10:30 AM
  3. is closable Ext.Window destroyed from dom on close?
    By andynuss in forum Ext 3.x: Help & Discussion
    Replies: 1
    Last Post: 22 Oct 2009, 3:48 AM
  4. Replies: 6
    Last Post: 19 Mar 2009, 12:31 PM
  5. newbie question: how can I use Extjs to manipulate DOM
    By orixilus in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 9 Jul 2008, 7:29 AM

Thread Participants: 15