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

Thanks for sharing, looks very nice!

Hopefully I find time to play around with it.

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.


https://github.com/swluken/TouchTreeGrid

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

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

Ok thanks, I can import it now, and run a simple example with some data
I continue to play with it now

TouchTreeGrid enhanced (2.1x and 2.2x versions) to support
column sorting within "grouped" rows for simple lists.
Enhancements to support Horizontal scrolliing also implemented.
All component changes are backward compatible to prior versions.


Added Touch 2.2 examples (also work for 2.1):
- Added zebra row striping to "Basic" DOW History example
- Added simple list example with grouped rows and custom grouper text
(column sorting within each group)
- Added simple list example for horizontal scrolling

Download available at: https://market.sencha.com/extensions/touchtreegrid
or https://github.com/swluken/TouchTreeGrid
Attachment 43791Attachment 43792

Hi,

is it there an addColumn method or can I add columns?
I want to create the grid dynamic. So I do not know how many columns are in the JSON file witch the store is loading.
The second question is can I want to read the header entries also from the JSON file. Is there a good way to do that? In my grid the header should show the unit of different times.

Hi,

There's no addColumn() method but that's a good idea I'll plan to implement...along with hideColumn(), showColumn() methods. Note "columns" is just an array that you can can update on the fly or via data from the server. It contains definitions for both the data field to display in a particular column (dataIndex) and the header text to display (header). Note It doesn't have to be defined within the linked instance in the view.

loadColumnsCensusMaine() method in Touch TreeGridController.js (TouchTreeGrid_Advanced* directories) is an example where I dynamically change the columns for the Census example depending on Phone vs. Tablet -and- Portrait vs. Landscape (i.e. as device is rotated). In our production implementations we retrieve both data and columns array definitions (i.e. 2 different arrays in same JSON string) from the server in one AJAX call (custom code in the Controller as opposed to using Store functionality) and load both Columns array and Store in the callback method. Another benefit of this for larger applications is that the footprint size of the application downloaded to the device is minimized. I'll try to get an example of this out there in next few days.

Finally, I plan to support optional header_columns array and categ_columns array for users who want to display different number of columns (or different widths) in the category rows (for treegrids) and header rows (all grid types). One example would be where you want to wrap 2 lines of data in a single detail/leaf row. The second line might just be a long description. Your header entries would line up with the 1st line but maybe not needed for the 2nd line. We can also achieve the same concept of list groupers by supporting this for category rows. Anyone reading this please let me know if there is more of an immediate requirement for this.

Best regards,
Steve