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.
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) .
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.
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).
Using TouchTreeGrid with normal Store for Freeze Columns
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.
- '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.
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.
Detailed documentation found in TTG_Forms project directory (TTG_Forms.pdf)
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).
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.