(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
-
MenuEx (Simplified example of how to utilize new Menu component included in Touch 2.3 for various implementations and using TouchTreeGrid for left/right menu items)
http://www.gomainerentals.com/Sencha/MenuEx/app.html -
TTG_LockedColumns (Locked Column with horizontal scrolling examples - Standard Grids and TreeGrids...refer to TTG_LockedColumns.pdf for additional documentation)
http://www.gomainerentals.com/Sencha/TTG_LockedColumns/index.html -
CalendarPicker (Full set of Calendar Picker examples for Sencha Touch)
http://www.gomainerentals.com/Sencha/CalendarPicker/app.html
The equivalent EXTJS "CalendarMatrix" component can be found at:
https://github.com/swluken/CalendarMatrix
CalendarMatrix Demo
http://www.gomainerentals.com/Sencha/CalendarMatrixDemo/index.html
-
TTG_Forms (Standalone example of how forms can be embedded in Category and Content/Leaf rows)
http://www.gomainerentals.com/Sencha/TTG_Forms/index.html -
TouchTreeGrid_Advanced_23 (Original Tab Panel version of Examples implemented for Touch 2.3)
http://www.gomainerentals.com/Sencha/TouchTreeGrid_Advanced_23/index.html -
DynamicLoadEx2C (Dynamically load Nodes when expanded for large TreeStores)
http://www.gomainerentals.com/Sencha/DynamicLoadEx2C/index.html
(further discussion at: http://www.sencha.com/forum/showthread.php?259616-TouchTreeGrid-component&p=1058383&viewfull=1#post1058383) -
TouchTreeGrid_Advanced_21 (Original Tab Panel version of Examples implemented for Touch 2.1)
-
CalendarPicer_Basic (Basic example of Calendar Pickers used for date selection)
-
TouchTreeGrid_Basic_22 (Basic TreeGrid example for Touch 2.2)
-
TouchTreeGrid_Basic_21 (Basic TreeGrid example for Touch 2.1)
***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
Detailed documention included in the download: "TouchTreeGrid - Documentation.pdf" and "CalenderPicker.pdf"
Copyright (c) 2013-2015 Steve Luken. This software is free to use (refer to associated MIT.LISCENSE) .