Hybrid View

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

      0  

    Default TouchTreeGrid component

    TouchTreeGrid component


    Hi, I recently published flexible Tree Grid and Accordion component designed after Mitchell Simoens Ext.ux.touch.grid component. I've tested it with up to 3000 row treestore on Android 4, IPhone 5 and IPad (3rd generation) and it functions and scrolls very fast. I started with Shinobu Kawano's work on Ext.ux.AccordionList Appreciate any feedback to further enhance this. Extensive documentation on it's use is available in the download.

    Regards, Steve..

    https://github.com/swluken/TouchTreeGrid

  2. #2
    Sencha User armode's Avatar
    Join Date
    Nov 2011
    Location
    Germany / Darmstadt
    Posts
    64
    Vote Rating
    4
    armode is on a distinguished road

      0  

    Default


    Thanks for sharing, looks very nice!

    Hopefully I find time to play around with it.

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

      0  

    Default TouchTreeGrid now supports Standard Grids and Accordions with single Expand

    TouchTreeGrid now supports Standard Grids and Accordions with single Expand


    TouchTreeGrid is an extremely versatile and easy to implement Sencha Touch 2.1x custom component that supports Tree Grids, Standard Grids and traditional Accordion view layouts (all by the same component). Column sorting and custom data renderings such as comma formatting, currency, percents and custom colors for negative vs. positive values are included. TouchTreeGrid utilizes Sencha’s Ext.dataview.List component and Disclosure events are supported for leafs and optionally for category rows.

    TouchTreeGrid was developed entirely within Sencha Architect (v2.2) designer product and can also be used without Architect. An Architect component is provided for import into your toolbox (TouchTreeGrid.xdc). Using Sencha Architect you can implement this component for new grid implementations very rapidly. Both basic and advanced examples are included in the download. Scrolling and overall functionality was found to be very fast for a larger data example containing +3000 rows and 3 category levels. This software can be downloaded at https://github.com/swluken/TouchTreeGrid along with comprehensive documentation and is free to use (refer to associated MIT.LISCENSE) .

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

      0  

    Default TouchTreeGrid upgraded for Touch 2.2

    TouchTreeGrid upgraded for Touch 2.2


    TouchTreeGrid component and examples upgraded to Touch 2.2 in download directory TouchTreeGrid_Advanced_220. Refer to ChangeLog.txt for details. Also included is example of PullRefresh implementation to use latestfetched event in lieu of deprecated refreshFn.


    https://github.com/swluken/TouchTreeGrid

  5. #5
    Sencha Premium Member
    Join Date
    Mar 2013
    Posts
    39
    Vote Rating
    1
    cassinisolutions is on a distinguished road

      0  

    Default


    Hello Steve,

    I'm testing your component as it can be imported into Architect

    However I use Touch 2.2, and I can't load the .xdc, because it has been done for touch2.1

    => Can you create another xdc for touch2.2 ? (or maybe tweaking the frameWork version in the xdc may be ok, I dunno...)

    Thanks for sharing your component

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

      0  

    Default TouchTreeGrid component for Touch 2.2

    TouchTreeGrid component for Touch 2.2


    Hi,

    TouchTreeGrid.xdc in the "TouchTreeGrid_Advanced_220" directory is the Touch 2.2 version. I created it using most recent Architect Version: 2.2.2 Build: 971 and just now tested importing it into my toolbox and dragging ontoView within Project Inspector. My Architect Library path is: http://cdn.sencha.com/touch/sencha-touch-2.2.0/.

    Note TouchTreeGrid.xdc in "TouchTreeGrid_Advanced_21" and "TouchTreeGrid_Basic_21" directories is the Touch 2.1 version (also created using same version of Architect).

    Let me know if I am missing something.

    Regards,
    Steve

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

      0  

    Default Using TouchTreeGrid with normal Store for Freeze Columns

    Using TouchTreeGrid with normal Store for Freeze Columns


    Hi,

    Freeze column is supported for regular store in addition to tree store. Example found at http://www.lincolnwaterfrontrentals....reeze/app.html for "EXTJS 4.2 Big Data Example" tab. For this example I was trying to show how TouchTreeGrid could be used to mimic the Big Data Example found in EXTJS Kitchen Sink demo.

    Refer to bigDataList.js view (TouchTreeGrid_FreezeColumn project directory downloaded from https://github.com/swluken/TouchTreeGrid) and note the following:

    - 'BigDataStore' is a regular store
    - Config 'simpleList = true' is defined for the locked columns and the normal scrolling column instances of TouchTreeGrid..
    - Configs linkedGridParentItemId and linkedGridsArr are required to synchronize the two grids.
    - Optional config 'headerTplOverride' was used to support grouped column header descriptions. Note this is a feature I will support in a more simplified way at some point consistent with Sencha grids.
    - "TouchTreeGrid_FreezeColumn.pdf" also found in same project directory with more detailed documentation.

    Hope this helps,
    Steve


    BigDataExample.jpg

  8. #8
    Sencha Premium Member TheStreet's Avatar
    Join Date
    Sep 2012
    Posts
    63
    Vote Rating
    0
    TheStreet is on a distinguished road

      0  

    Default


    Thanks Steve. Your component is a life saver. I still don't understand how this functionality was not added to Touch Grid in 2.3. It seems necessary for a small screen to have a lock column.