/TouchTreeGrid

Sencha Touch Tree Grid, Basic Grid and Accordion Component with Examples

Primary LanguageJavaScript

TouchTreeGrid and CalendarPicker

(Touch 2.1, 2.2, 2.3, 2.4)

TouchTreeGrid is an extremely versatile and easy to implement Sencha Touch 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 with all supported configs, methods and events. Most recently support was added to embed forms (readOnly and editable) within Category and Leaf rows.

CalendarPicker component utilizes TouchTreeGrid to provide incredible flexibility for date selection and calendar display on Phones and Tablets. Calendars can be implemented with just a few configurations in overlay panels or traditional containers. International Calendars are supported with 44 different languages included in the download. Calendar is constructed using #months backward to #months forward configurations. Many features exist including: collapsible months for rapid single select, range select in single calendar popup, or multi-select random dates in single popup. Specific dates can be disabled from selection. Customizable styling exists for holidays, weekends, selected days, disabled days and custom days. Custom filters can be easily applied to only display specific months highlighting important upcoming dates.
Day planner support is partially implemented and will be forthcoming.

TouchTreeGrid and CalendarPicker were developed entirely within Sencha Architect designer product and can also be used without Architect. Architect components are provided for import into your toolbox (TouchTreeGrid.xdc, CalendarPicker.xdc).

This software can be downloaded at:
https://github.com/swluken/TouchTreeGrid
**Don't forget to STAR this repository in GITHUB to be notified for frequent changes !!

Refer to Forum thread for TouchTreeGrid with answers to many of your questions:
http://www.sencha.com/forum/showthread.php?259616-TouchTreeGrid-component

Forum thread for CalendarPicker:
http://www.sencha.com/forum/showthread.php?270677-Touch-CalendarPicker-Component

Refer to "TouchTreeGrid - Documentation.pdf" (page 1) for version details associated with each of the project directories included in the download:

  • TTG_KitchenSink ("Kitchen Sink" slide navigation example that includes most updated version of TouchTreeGrid using Sencha Touch v2.4)

Most current TouchTreeGrid Source Code:
/TTG_KitchenSink/app/view/TouchTreeGrid.js
Most current Architect component:
/ArchitectComponents/Architect 3.1.0 Build 1943/TouchTreeGrid.xdc

Tablet Demo:
http://www.gomainerentals.com/Sencha/TTG_KitchenSink/index.html?deviceType=Tablet
Phone Demo (resize your browser!):
http://www.gomainerentals.com/Sencha/TTG_KitchenSink/index.html?deviceType=Phone



The equivalent EXTJS "CalendarMatrix" component can be found at:
https://github.com/swluken/CalendarMatrix
CalendarMatrix Demo
http://www.gomainerentals.com/Sencha/CalendarMatrixDemo/index.html

***Refer to GoMaineRentals.com website for responsive website example using TouchTreeGrid and CalendarPicker for Tablet and Phone specific Touch applications. TouchTreeGrid was used for all pages with lists. As a side, the desktop version was written in EXTJS. https://github.com/borismus/device.js/tree/master was used to leverage media queries to launch the appropriate framework based on device.

- Tablet version:
http://www.gomainerentals.com/m/index.html?deviceType=Tablet
- Phone version (resize your browser!):
http://www.gomainerentals.com/m/index.html?deviceType=Phone

PLANNED ENHANCEMENTS TO TouchTreeGrid:

  • Column sorting within TreeGrid categories.
  • Multi-column sorting feature
  • Support initially sorted shading feature
  • Option for single-Accordion select mode to sort currently selected category to top.
  • Column show/hide/add/update example with accompaning methods
  • More renderer function examples
  • Animated expand/collapse
  • Possible support for editable cells
  • Possible support for drag/drop

PLANNED ENHANCEMENTS TO CalendarPicker:

  • Auto-generation of re-occuring custom dates with descriptions (i.e. anniverseries, birthdates, meetings, etc)
  • Continued Day Planner support
  • Feature to expand/collapse months using user-defined Function
  • Horizontal scrolling calendars
  • Optional categorize by Year feature.
  • Soliciting other good ideas to integrate with this component

Getting Started

Detailed documention included in the download: "TouchTreeGrid - Documentation.pdf" and "CalenderPicker.pdf"

License

Copyright (c) 2013-2015 Steve Luken. This software is free to use (refer to associated MIT.LISCENSE) .