1. #51
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    Boston, MA
    Posts
    57
    Vote Rating
    3
    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
    57
    Vote Rating
    3
    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
    57
    Vote Rating
    3
    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

  8. #58
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    Boston, MA
    Posts
    57
    Vote Rating
    3
    steve_luken is on a distinguished road

      0  

    Default CheckColumn Example and Conditional Row Styling for Standard Grids

    CheckColumn Example and Conditional Row Styling for Standard Grids


    New version of TouchTreeGrid uploaded to: https://github.com/swluken/TouchTreeGrid

    Includes:
    • TTG_Slider_2.4 project upgraded to Touch 2.4
    • Added configs to support conditional row styling for standard grids
      (already supported for tree grids)
    • Added examples of CheckColumn for both tree grid and standard grids
      http://www.gomainerentals.com/Sencha...2.4/index.html
    Regards,
    Steve
    Project#3.jpgBasicList#2.jpg

  9. #59
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    Boston, MA
    Posts
    57
    Vote Rating
    3
    steve_luken is on a distinguished road

      0  

    Default TouchTreeGrid supports embedded Forms

    TouchTreeGrid supports embedded Forms


    TouchTreeGrid now supports embedded Forms within TreeGrids with minimal additional configuration. Forms can be embedded in Content rows (aka Leafs) and/or Category rows.

    See demo at: http://www.gomainerentals.com/Sencha...rms/index.html
    (works on Android/iOS devices and Chrome browser, but some issues with Firefox/IE )

    FormsGridEdit.jpg

    The “Grid Edit” tab demonstrates editing directly with the grid. The “Form Edit” tab demonstrates read-only display within the expanded grid where user navigates to a separate Form Panel for purposes of edit. The “Multi” tab demonstrates how different formats can be easily toggled (example Short-form vs. Long-form). The “Multi-Mixed” tab demonstrates how different forms can be easily displayed based on the record being displayed. It is also possible to display different forms based on category. This implementation supports a form-level “Read-only” config which hopefully will be supported by future release of Sencha Touch.

    Download latest version from: https://github.com/swluken/TouchTreeGrid

    Detailed documentation found in TTG_Forms project directory (TTG_Forms.pdf)

    Known Limitations


    This is a work in progress. I am releasing now as supported functionality may be useful to some as is. Edit functionality works best across all the form component types with Touch versions 2.3.0 and up. Currently only the following form elements are supported: textfield, textareafield, selectfield, checkboxfield, radiofield, labels, buttons, images. Some of the others may or may not work without additional enhancements; I just haven't spent much time on them yet. Edit of textfield and textareafield does not seem to work smoothly on iOS devices (still working on this) so I disabled edit for these devices in all but the “Form Edit” example (see MyFormPanel.js postInit method). “Grid Edit” does work for the Android devices I tested. Read-only mode works on all devices. If editing is required, I propose to either use the “Form Edit” approach for optimal performance and usability, or a hybrid solution where form edit is used for iOS devices and “Grid Edit” used for all other supported devices.


    Performance degrades the more form rows are displayed at the same time. This is particularly true when using radio buttons which I struggled the most with to support. I recommend config “singleExpand: true” to display in accordion mode and I recommend against implementing expandAll feature (disabled in my examples).

    Regards,
    Steve

  10. #60
    Sencha Premium Member
    Join Date
    Aug 2012
    Location
    Boston, MA
    Posts
    57
    Vote Rating
    3
    steve_luken is on a distinguished road

      0  

    Default TouchTreeGrid - Enhanced Locked Column Support

    TouchTreeGrid - Enhanced Locked Column Support


    Added more examples of both standard grids and treegrids with Locked Columns and updated TouchTreeGrid to add support for thumb so that user can resize locked grid width to focus on left or right side of the grid. This should be particularly useful for phones where real-estate is a premium. Also included in the examples are how to implement pinch event and/or buttons to toggle grid size. Thumbs can be configured to use any supported Sencha component. Default behaviour is to temporarily display a veritcal red line behind the thumb to show how the grid will be resized when the thumb drag ends.


    Download at: https://github.com/swluken/TouchTreeGrid
    **Don't forget to STAR this repository in GITHUB to be notified of frequent enhancements !!

    TreeGridLockedCols.jpgStdGridLockedCols.jpg

    Updated following projects to latest version of TouchTreeGrid using Touch 2.4 framework:


    - TTG_KitchenSink (new) - Includes (or provides links) to all TouchTreeGrid examples
    > Tablet Demo:
    http://www.gomainerentals.com/Sencha...iceType=Tablet
    > Phone Demo (be sure to resize your browser!):
    http://www.gomainerentals.com/Sencha...viceType=Phone
    > Be sure to click on help links for details on each example
    > See also TouchTreeGrid-Documentation.pdf from download
    > Appendix D - TouchTreeGrid config definitions

    - TTG_LockedColumns (new) - See TTG_LockedColumns.pdf in project directory for detailed documentation
    > TreeGrid example implements pinch event and buttons to resize grid

    - CalendarPicker - review CalendarPicker.pdf from download

    - TTG_Forms - recent "work in progress" example of grids with embedded forms


    Refer to ChangeLog.txt for more details on this release.


    Best regards,
    Steve Luken