1. #1
    Sencha Premium Member
    Join Date
    Nov 2009
    Posts
    92
    Vote Rating
    3
    tomb@ibcos.co.uk is on a distinguished road

      0  

    Default Should Ext.Container methods add and remove actually add and remove?

    Should Ext.Container methods add and remove actually add and remove?


    Hi All,

    I've come across an issue where adding a panel to a window and removing it doesn't actually update the DOM. IMHO the "add" and "remove" methods should do exactly what they suggest which is adding and removing a component from its container and also make the necessary changes to the DOM. The add method only adds a component to a container requiring a call to doLayout to actually update the DOM. The remove successfully removes a component from its container but doesn't update the DOM, leaving the components html markup behind. Even a call to doLayout doesn't remove the components markup.

    I understand that doLayout is there so you can add multiple components and only calculate the layout once. However, the add method allows you to add an array of components providing a way of keeping the performance up. Surely the add method could automatically call doLayout when components are added?

    Removing components is the biggest problem. Once a component has been rendered its markup is not removed until the component is destroyed. You can only show or hide the components markup. So, if you add a panel to a window, call doLayout, then remove the panel, the window still shows the panels markup. More code would have to be written to also hide a panel after removing it. This seems like redundant code to me and something I should not have to worry about. Coming from Objective-C / C++ / VB / .Net etc, the last thing I expected is to manually have to hide a panel after its been removed which took quite a while to figure out, especially as there is no mention on the "remove" method about also hiding a component in the docs.

    My original post including some code examples can be found here http://www.sencha.com/forum/showthre...es-old-content

    What does everyone else think?

  2. #2
    Sencha Premium Member
    Join Date
    Nov 2009
    Posts
    92
    Vote Rating
    3
    tomb@ibcos.co.uk is on a distinguished road

      0  

    Default


    Come on, surely someone out there has an opinion on this?

  3. #3
    Ext JS Premium Member
    Join Date
    Aug 2007
    Location
    Antwerp, Belgium
    Posts
    562
    Vote Rating
    53
    joeri is a jewel in the rough joeri is a jewel in the rough joeri is a jewel in the rough joeri is a jewel in the rough

      0  

    Default


    Rendering a component means doing layout on the container it appears in. If you were to render a component inside the add() call, it would mean a fresh layout per added component. Adding ten components would mean ten layout actions. Since layout is the heaviest action you can do in the ext framework, this would be very slow.

    The way to solve this is to buffer requests for layout until the current javascript thread completes (which involves setting a timeout). As I understand it (but I may be wrong), this is what extjs 4 does.

  4. #4
    Sencha Premium Member
    Join Date
    Nov 2009
    Posts
    92
    Vote Rating
    3
    tomb@ibcos.co.uk is on a distinguished road

      0  

    Default


    Thanks for the reply Joeri,

    Thats great that Ext4 may fix the adding components issue. But the Removing components problem still exists. After removing a component from its container, the component still exists within the containers DOM, even after a doLayout.

    What the point of the remove function?

    Thanks

  5. #5
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    Quote Originally Posted by tomb@ibcos.co.uk View Post

    What the point of the remove function?
    to remove a child from the parent Container's items collection without removing the child's corresponding markup (default behaviour) -- this allows the child to be moved to a different parent.

    pass true as the 2nd argument to Container#remove() if you want to destroy the child + remove its associated markup.

  6. #6
    Sencha Premium Member
    Join Date
    Nov 2009
    Posts
    92
    Vote Rating
    3
    tomb@ibcos.co.uk is on a distinguished road

      0  

    Default


    But what if I wanted to remove the child from its container without destroying it so I can add it to another container at some point?

    The docs aren't particularly clear on this. They say that the remove method removes a child from its container and allows you to destroy it to clean up resources etc. This would suggest to me that once a child is removed, no trace of it exists in the container object regardless of weather or not you destroy the child.

    It seems counter intuitive to remove something and then have to hide it because it has not actually been removed.

    At the very least, the docs should be updated to say that removing a child doesn't update the DOM and child.hide() should be called to remove it from view.

  7. #7
    Sencha Premium Member
    Join Date
    Nov 2009
    Posts
    92
    Vote Rating
    3
    tomb@ibcos.co.uk is on a distinguished road

      0  

    Default


    2 ideas I've had that would make more sense to me.

    1. Store the markup in the components js object
    Could the markup be removed from the DOM and stored in a property of the removed component and then added back into the DOM when the component is added to a container? I'm not sure if there are performance implications with this method.

    2. Move the markup to a hidden container
    Could Ext not create a hidden container on startup that would serve as a scratch area for all removed components? When a component is removed it's markup would be moved to the scratch container and then moved back to the right place in the DOM when its added to a new container.

  8. #8
    Ext JS Premium Member
    Join Date
    Feb 2011
    Posts
    38
    Vote Rating
    1
    rijkvanwel is on a distinguished road

      0  

    Default


    Just wanted to let you know I have the same problem, and I agree with what you said!
    Regards,
    Rijk van Wel

  9. #9
    Sencha User
    Join Date
    Apr 2012
    Posts
    9
    Vote Rating
    0
    ldashevskiy is on a distinguished road

      0  

    Default


    Same problem and agree on the confusion.

Similar Threads

  1. ContainerClear. Plugin to cause Container.remove to remove removed Components
    By Animal in forum Ext 3.x: User Extensions and Plugins
    Replies: 5
    Last Post: 13 Dec 2010, 5:23 AM
  2. Problem with Container.remove
    By winklerd in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 23 Aug 2010, 8:16 AM
  3. [FIXED] Container.remove causes NPE
    By goodwrench in forum Ext GWT: Bugs (1.x)
    Replies: 1
    Last Post: 25 May 2008, 9:50 PM
  4. Replies: 10
    Last Post: 8 Oct 2007, 3:58 PM
  5. add/remove QuickTips methods/functions
    By Nullity in forum Community Discussion
    Replies: 6
    Last Post: 10 Apr 2007, 6:17 AM

Thread Participants: 4