You found a bug! We've classified it as EXTJS-8723 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha Premium Member
    Join Date
    Dec 2011
    Location
    London, UK
    Posts
    260
    Vote Rating
    8
    bseddon will become famous soon enough

      0  

    Default Problem with Treestores

    Problem with Treestores


    In an application we have a need to present a tree displaying the same content in two places: one which allows a user to edit content (add/edit/remove nodes) and another in which the same information is used as an option selection component.

    In an ideal world it would be possible to share the same tree store across the two UI components. However, this is not practical because tree store nodes implement NodeInterface which mixes UI (expanded, icon, etc.) with data. When a store is shared across multiple tree grids the expanded state is shared. This is not acceptable to us.

    Instead we use the tree store appended, removed and updated events to maintain a parallel set of nodes in a separate store. This works OK - sort of. The problem is our app requires that tree nodes should be sorted when nodes are added/edited and sorting the tree *store* results in a dom error when the tree grid has not yet been displayed. That is, if the tree grid has been displayed and tree store nodes are sorted everything works OK. If the tree grid has not been displayed sorting fails.

    The problem, I think, is that the act of sorting the store results in an interaction with the UI. Why? It seems to me this is a bug. Sure I get that at some point the UI needs to reflect the sort order of the store but why the error when nodes on the hidden tree grid are sorted?

    I've attached a sample application to illustrate the problem. The application presents a tab panel with two tabs. The tab visible when the application is started contains the 'edit' tree grid (ok, it doesn't edit anything because this is a minimal app to focus on the core problem). However it is the 'master' tree grid. Changes to it are reflected in the grid on the second tab (but not the other way around).

    Before looking at the second tab, try collapsing one of the visible nodes (any node). You will see a DOM error. Now refresh browser to reset the application. Select the second tab so the second tree grid is visible. Then go back to the first grid and collapse a grid again. No error.

    The error occurs when the node sort function is called in the function 'typeUpdated' in the controller. Again, the question is why is there connection with a UI component that is not ready (the viewready event has not been called)?

    We resolve the problem by listening to the viewready event of the second (hidden) tree grid to set a property indicating the ready state of the view. We only sort nodes when the view property indicates the view is ready and can support sorting.
    Attached Files

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,641
    Vote Rating
    898
    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


    Thanks for the report.
    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.

Thread Participants: 1

Tags for this Thread