Hybrid View

  1. #1
    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 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
    57
    Vote Rating
    3
    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
    57
    Vote Rating
    3
    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
    57
    Vote Rating
    3
    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
    57
    Vote Rating
    3
    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.gomainerentals.com//Sench...olumn/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.

  9. #9
    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. #10
    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