1. #51
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    Boston, MA
    Posts
    52
    Vote Rating
    2
    steve_luken is on a distinguished road

      0  

    Default Dynamic Load of TreeStore Child Nodes with Example

    Dynamic Load of TreeStore Child Nodes with Example


    Hi,

    I uploaded sample code to https://github.com/swluken/TouchTreeGrid ("DynamicLoadEx2" directory) of at least one way to retrieve and update child nodes of a large tree store dynamically upon node expansion. You can listen for the "nodeItemTap" event published from TouchTreeGrid to add the child nodes dynamically. You would have to provide your own functionality for Expand/Collapse All. Note also that you need to provide sort on the tree store that would apply to all levels. Take a look at the onContainerNodeItemTap() method within CommonController.js. You can also take a look at the method used in EXTJS Kitchen Sink example to see if it will work in Touch: http://docs.sencha.com/extjs/4.2.2/#...theme-neptune/ (Trees -> Tree Reorder) uses a proxy to automatically load the child nodes.

    You can see a demo of this at: http://www.gomainerentals.com/Sencha/DynamicLoadEx2/index.html

    DemoScreenShot.png

    Regards,
    Steve

  2. #52
    Sencha User
    Join Date
    Mar 2013
    Posts
    10
    Vote Rating
    0
    banerjeesoumik is on a distinguished road

      0  

    Default Thanks

    Thanks


    Thanks a lot

  3. #53
    Sencha User
    Join Date
    Mar 2013
    Posts
    10
    Vote Rating
    0
    banerjeesoumik is on a distinguished road

      0  

    Default


    I am facing another issue. when i am trying to add child nodes, till 6 label its working fine. After that ,its appending in wrong position.

    I did changes in TouchTreeGrid-master\DynamicLoadEx2\app\controller\CommonController.js only. other files unchanged.

    below is my used js code for controller.




    Ext.define('TouchTreeGrid.controller.CommonController', {
    extend: 'Ext.app.Controller',


    config: {
    control: {
    "container#categ": {
    nodeItemTap: 'onContainerNodeItemTap'
    }
    }
    },


    onContainerNodeItemTap: function(container, list, index, target, record, e) {
    var store = list.getStore(),
    node = store.getAt(index),
    i, newNode;
    console.log(node);


    if (node.isExpanded()) {return;} // skip if collapsing node


    if (node.hasChildNodes()) {return;} // child nodes already loaded so skip




    // CAN REPLACE THIS WITH AJAX REQUEST FOR CHILD NODES
    for (i=0; i<1; i++) {
    newNode =
    {
    "leaf" : false,
    "CATEG" : record.get('CATEG') + ' - ' + "Dynamic Leaf "+(i+1).toString()
    };

    //node.appendChild(newNode); // APPEARS TO BE BUG WITH THIS METHOD
    node.insertChild(i-1, newNode);
    }




    // NOTE: to get child nodes to sort under expanded node correctly, you need to maintain
    // a sort string on the store that would apply to all rows of the store


    }


    });


    Will you please look into this.

    Thanks,
    Soumik

  4. #54
    Sencha User
    Join Date
    Mar 2013
    Posts
    10
    Vote Rating
    0
    banerjeesoumik is on a distinguished road

      0  

    Default


    Its happening because sorters property in store. But without that tree grid will not work.

    Thanks,
    Soumik

  5. #55
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    Boston, MA
    Posts
    52
    Vote Rating
    2
    steve_luken is on a distinguished road

      0  

    Default Override to correct TreeStore sorting issue

    Override to correct TreeStore sorting issue


    Hi,

    Thanks for bringing this to my attention. After extensive debugging I found that the issue was due to limitations with Sencha Touch's treeSortFn method within Ext.data.NodeStore. The provided sort method fails after about 5 levels or so (depends on the implementation). I have uploaded DynamicLoadEx2C project directory to https://github.com/swluken/TouchTreeGrid which includes ./app/overrides/NodeStore.js to override the default algorithm resolving the issue.

    Note that to maintain sort on a TreeStore with dynamic nodes you need to define a sorter for the TreeStore itself which is used internally to sort all siblings for a given node depth. The treeSortFn is applied after the user-defined sorter and is dependent on internal node fields "depth" and "index". The provided override contains logic for using a sort field that would apply across the entire store if defined. Otherwise, I reduce some of the parameters from the original sort algorithm to allow it to work for more depths. You could also come up with your own tree sorter algorithm.

    Working example found at: http://www.gomainerentals.com/Sencha...x2C/index.html

    DynamicNodes.png

    Regards,
    Steve

  6. #56
    Sencha User
    Join Date
    Oct 2014
    Posts
    3
    Vote Rating
    0
    paigemcandrew is on a distinguished road

      0  

    Default Load expanded

    Load expanded


    First, this is a great tool,thank you.

    Second, I need the touchtreegrid to load expanded initially and I can't seem to find the setting that will do that.

    I've tried he defaultCollapseLevel=2 and set the applyDefaultCollapseLevel but it seems that nothing will show it initially expanded.

    Please help.

  7. #57
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    Boston, MA
    Posts
    52
    Vote Rating
    2
    steve_luken is on a distinguished road

      0  

    Default Getting TouchTreeGrid to Expand All after Data Load

    Getting TouchTreeGrid to Expand All after Data Load


    The issue is that after loading your data you need to make a call to TouchTreeGrid doRefreshList() method, which internally calls doExpandDepth() method. This gets called upon view initialization, but you need to call it manually if your data is being loaded after view initialization.


    Take a look at TouchTreeGrid_Advanced_23 project example. CommonController.js => postLoadProcess() method calls doRefreshList() for a number of examples after the data is loaded.


    Note that the default defaultCollapseLevel: 99 essentially means expand all so you shouldn't have to provide this config. Similarly, applyDefaultCollapseLevel: true is the default so you don't need to specify that either.


    As a side, if you wanted to customize the expanded nodes similar to to the Project Examples you would update "expanded" field in your store (this field is added for you automatically for TreeStores), and you would set applyDefaultCollapseLevel: false

    Regards,
    Steve