TouchTreeGrid

KO | EN

gitlite — search

#typescript #ai-agents #deepseek-harness #dsh-plugin #open-source #ai #cli #dsh #claude-code #codex #developer-tools #react

★ 52 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

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: <a href="https://github.com/swluken/TouchTreeGrid">https://github.com/swluken/TouchTreeGrid</a>
 **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&#95;KitchenSink ("Kitchen Sink" slide navigation example that includes most updated version of TouchTreeGrid using Sencha Touch v2.4)
 
 Most current TouchTreeGrid Source Code: /TTG&#95;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&#95;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&#95;Advanced&#95;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

Getting Started
---------------

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

License
-------

TouchTreeGrid

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README