View Full Version : TouchTreeGrid component

23 Mar 2013, 9:20 PM
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 (https://github.com/swluken/TouchTreeGrid)

25 Mar 2013, 2:13 AM
Thanks for sharing, looks very nice!

Hopefully I find time to play around with it.

15 Apr 2013, 6:53 PM
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) .

5 May 2013, 10:57 AM
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.


6 May 2013, 6:10 AM
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

6 May 2013, 6:48 AM

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.


6 May 2013, 7:46 AM
Ok thanks, I can import it now, and run a simple example with some data
I continue to play with it now

14 May 2013, 8:37 PM
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

15 May 2013, 10:02 PM

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.

16 May 2013, 3:07 AM

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,

17 May 2013, 1:21 PM

Thank you for creating this component. I've been looking for ways to use grids in sencha architect and was having trouble with putting the touchgrid version.

I wanted to ask you how what steps I need to take to use it? I saw the info on the help, and basically did the following:

1. Create a new Touch 2.2 Project.
2. Added the TouchTreeGrid.
3. Added a Panel.
4. Linked the TouchTreeGrid to the Panel.
5. Set the Store in the Link with the following data:
{name:'Sample 1', category:'Category 1', type:'Type 1'},
{name:'Sample 1', category:'Category 1', type:'Type 1'},
{name:'Sample 1', category:'Category 1', type:'Type 1'},
{name:'Sample 1', category:'Category 1', type:'Type 1'},
{name:'Sample 1', category:'Category 1', type:'Type 1'},
{name:'Sample 1', category:'Category 1', type:'Type 1'},
{name:'Sample 1', category:'Category 1', type:'Type 1'},
{name:'Sample 1', category:'Category 1', type:'Type 1'},
{name:'Sample 1', category:'Category 1', type:'Type 1'}
6. Added columns in the Link with the following:


7. Copied Resources to the project, and now get this error:
Uncaught TypeError: Object #<Object> has no method 'setItemTpl' TouchTreeGrid.js:551

Any clues?

17 May 2013, 5:41 PM
Hi, as mentioned in our private message 'store' config needs to remain in TouchTreeGrid.js for the component to work. When specifying store in a linked instance, an object edit window will appear with two braces {}. To enter a store reference as a string simply delete the {} and type the store name. It will appear as a string when you view the code. I implemented this way so that stores could be defined directly within the linked instance as an object if desired...but I realize this can easily cause confusion. "Notes on Implementation" in "TouchTreeGrid - Documentation.pdf" (pages 19-20) discuss this along with the minimum required configs.

Let me know how it goes.

Best regards,

22 May 2013, 8:06 AM
I've been playing around with your TouchTreeGrid today and just wanted to say this is pretty nice and thanks for putting it out there.

And because we use Architect here I'm extremely impressed that you released the importable component as well. Makes life easier.

Anyway I just wanted to make sure you knew your efforts were appreciated :)


26 May 2013, 10:25 AM
Thanks this looks very great!
It would be cool if the treegrid can handle selections of rows.

26 May 2013, 1:23 PM

Row selection of expanded 'leaf' rows is supported by setting configs:

disableSelection: false
mode: 'MULTI' (if you want to support multi-selection)

Side effect is that the expandable category row, when selected, will also show the selected CSS colors by default. That should be avoidable via CSS .. I'll play with it and get an example out there if I get it working.

I'm currently working on some cool new features with examples and will post in next couple of days. One of the new features is to disable expand/collapse when you want to show a fixed expanded list. There might then be more of a need for highlighted row selection of the "disabled" category row.

Best regards,

30 May 2013, 3:11 AM
Am using your accodion list in one of my project. Its really great plugin. Am trying to do some filtering in accordion panel using Button. Sorting is working but the expanded node is not showing the child nodes. When i click the parent node nothing display on the expand tab. This is my sorting button

text: 'Investors',
handler: function () {
var sto = Ext.getStore('Contactsstore');
// clear all existing filters
sto.filter('title', 'Investors');

Please help guide me in right direction. Your help is much appreciated.. thanks in advance

30 May 2013, 7:25 AM
I found a few threads out there and Sencha Support responded that TreeStores don't support filtering:
http://www.sencha.com/forum/showthread.php?253644 (http://www.sencha.com/forum/showthread.php?257019)

"The NestedList uses TreeStore but each child List uses a Node store so you can filter the Node store on the list for the node. It's not the simplest for the TreeStore."

Check out the available methods:

I'll also take a look at this and post an example if I can. An alternative would be to rebuild your store server-side, within JavaScript, etc...

2 Jun 2013, 7:42 AM

- Customizable column shading when clicking on header column to sort ASC/DESC.
(Example: Lists => Basic Horiz and Dynamic)

- Example how to dynamically define Grid Columns, create Store and load data
from single AJAX server call in less than 40 lines of code.
(Example: Lists => Dynamic)

- Example of custom styled multi-row header
(Example: Lists => Horiz and Dynamic)

- Example how to trap tap event on any cell within a grid
(Example: Lists => Horiz -and- Dynamic ... tap on CloseDate cell for sample popup)

- Examples of how to implement CSS for row selection for 3 different scenarios:
1) Row selection for simple lists
(Example: Lists => Basic)
2) Row selection for TreeGrid leafs plus nodes also demonstrating new config where
expand/collapse feature can be disabled (disableExpandCollapse=true config).
(Example: Tasks => Tasks#2)
3) Row selection for TreeGrid leafs (only) where disableExpandCollapse=true and
scrolling is disabled (i.e. known list sizes)
(Example: Tasks => Tasks#3)

- Support option to define different column layouts/widths/contents for
Category rows vs. Detail rows (TreeGrids). Essentially implementing
expandable/collapsible "grouper" feature with TreeGrid allowing for
custom long text on category row.
(Example: Lists => Grouper2 ... Touch 2.1 example only for now)

- Example of custom expand/collapse controller function for large treestore to circumvent performance issues with Touch Node expand/collapse methods -or- to support server-side column sorting.
(Example: Lists => Grouper#2)

- All new examples found in ./TouchTreeGrid_Advanced_22/ directory.
Refer to "TouchTreeGrid - documentation.pdf" (Summary of Provided Examples) in download for further discussion on each of the examples.

- Config to control column width of expand/collapse arrow (default is 4% but 2% would
suffice for tablet implementations)

- More developer control over column styling (refer to CommitLog.txt in download)

- Providing source code on how to generate TreeStore from "unioned" JSON flat file containing ID and PARENT_ID columns. Refer to "TouchTreeGrid - Documenation.pdf"[Lists => Grouper#2 -TreeGrid serving ‘grouper’ feature with expand/collapse] for details on use.

- Cleaned up example code to be more readable

- Significant documentation updates to "TouchTreeGrid - Documentation.pdf"

Source code found at: https://github.com/swluken/TouchTreeGrid

Refer to CommitLog.txt for important upgrade steps to prior versions.

Refer to "Appendix C - Upgrading TouchTreeGrid component" in
"TouchTreeGrid - Documentation.pdf" for how to upgrade your
component within Architect.

15 Jun 2013, 9:07 PM


- New set of examples that utilize TouchTreeGrid component as
Accordion Slide Navigation Menu (i.e. Facebook style menu, but collapsible)
for Phones and as scrolling collapsible category menu for Tablets.
** Refer to directory ./TTG_Slider/. in download (Touch 2.2)
> All menu items easily defined in store
> Scrolling navigation menu with spring disabled such that user
can not scroll past top or bottom of list.

- Example of easy to implement TreeStore filter solution. There are a few
forum threads suggesting Sencha does not correctly support TreeStore filtering for
Touch or EXTJS. This example utilizes provided TreeStore generation algorithm
to rebuild TreeStore from saved array applying custom filter conditions.
> Census Filter Ex#1
(refer to "TouchTreeGrid - Documentation.pdf" for this example).

- Examples of embedded images within grid cells
> Sliding Menu => PNG file displayed on Category rows
> Project Tree Examples => Project #3 displays checkmarks
(Slide Navigation example only)

- Example of leaf row rendering function using styleContentRow config:
> Project Tree Examples => Project #3 rows shaded green where done
> Use styleCategRow config to style category rows

- Example of cell rendering function using CSS selector as opposed to Styles (Basic List #2).
Allows red/green cells to display as white text with blue background when selected.

- Added logic to differentiate handling of list disclose event vs. item tap as
tap of new Touch 2.2 disclosure icon triggers both events causing category rows
to expand/collapse when disclose event was intended.

- Added logic to not allow expand/collapse of specific node if expandable=false
for store defined node.

- Support optional column[] array CLS references in lieu of Styles. Example:
cls, sortedCls, categCls, categSortedCls, headerCls, headerSortedCls
instead of (or in addition to) existing style equivalents:
style, styleSorted, categStyle, categStyleSorted, headerStyle, headerStyleSorted
> Lists => Dynamic
Refer to ./data/dow2012dynamicCss.json for css-based column definitions

- Support different CSS selectors for each category level.
Default selector is ".touchtreegrid-list-categ". New config categCssArr[]
allows for specification of different CSS selectors for each level in same
way that categColorArr[] allows for basic color shading.
> Projects => Ex #2
> First category level in white italics using custom selector for that level.
Remaining levels use default selector.

- Corrected implementation of Grouper #2 example to work in Touch 2.2
Issue found was that in 2.2 you can't use same Model for Store and a TreeStore
(else you will observe strange behaviour when bouncing between two views
configured as such)

- All new Slider Menu examples found in ./TTG_Slider/ directory.
Refer to "TouchTreeGrid - documentation.pdf" (Summary of Provided Examples) in download for
further discussion on each of the examples.

- "TouchTreeGrid - Documentation.pdf" updated for new examples and Slider Menu implementation.

Refer to CommitLog.txt for update summary.

Refer to "Appendix C - Upgrading TouchTreeGrid component" in
"TouchTreeGrid - Documentation.pdf" for how to upgrade your
component within Architect.


- Column sorting within TreeGrid categories.
- Multi-column sorting feature
- Support initially sorted shading feature
- Column show/hide/add/update example with accompaning methods
- More renderer function examples
- Easy config options to auto-add buttons to footer to "auto-display" different sets of columns
(or provide methods for custom buttons)
- Support for editable cells
- Possible support for locked columns
- Seeking interest on supporting config option to use Ext.dataview.DataView vs. Ext.dataview.List

18 Jun 2013, 10:20 AM
Hi, in "Dynamic" example, vertical scrolling is not working properly, you can't see all the rows.


18 Jun 2013, 3:11 PM
Thanks for the report. I removed "height: 1000" config from the examples and updated GITHUB repository.

18 Jun 2013, 5:55 PM
For those trying to build simple tests of TouchTreeGrid within Architect, be sure not to mark TouchTreeGrid as your Initial View.

"Notes on Implementation" and "Basic Features" sections in "TouchTreeGrid - Documentation.pdf" discusses minimum configurations to get started.

Use a Store for simpleList=true and TreeStore only when you want to do non-simple lists.

You have to include TouchTreeGrid.css for default styling. SimpleLists will not render horizontally correctly without including this file. Any CSS overrides should be made in a second CSS file loaded "after" this one similar to the provided examples.

24 Jun 2013, 9:00 PM
Let me say that it is just awesome plugin .I am trying to add the Accordion functionality to my new project, Its working fine..
I have large no of data. So my doubt is ,can i include Listpaging or PullRefresh plugin along with this Accordion.
Can u have any example about how to do that..Please suggest how such functionality included with Accordion..Your help is much appreciated..Thanks in advance

25 Jun 2013, 3:25 AM

Project, Ex#1 is example that uses PullRefresh. It fires the new Touch 2.2 latestfetched event to the controller which reloads the data. Note refreshFn method is no longer supported in 2.2. Lists, Basic #1 example also uses PullRefresh and the data refresh is handled by the store. This is also covered under "Advanced Features" in "TouchTreeGrid - Documentation.pdf"

I haven't used the ListPaging plugin yet. I would expect it to work for simple list examples same as any other list. You will probably need to be more creative if needed for TreeGrid/Accordion examples. One strategy for really large trees is to only load the top nodes first, then load child nodes as needed. I found this EXTJS example that might be of use for doing that: http://www.mysamplecode.com/2012/02/extjs-tree-json-servlet-mysql.html

Note that Census example contains 400k of data (600 rows across 28 data elements) which sometimes will timeout within 10 seconds when loading on slower network (3G), but otherwise there is no issue scrolling the data on the devices I have tested. I have also tested a 3000 row example with no issue.

One exception is that expand/collapse ALL on the 600 and 3000 row treegrid examples was slow when using Sencha's expand/collapse methods provided with NodeInterface component (which is what TouchTreeGrid uses by default). For these cases I found it faster to reload the treestore expanded to desired level using the provided treestore generation algorithm. Similar to TTG_Slider Census Filter example, but without the filter function passed (refer to CensusController.js, methods onCensusFilterExpandButtonTap() and onCensusFilterCollapseButtonTap()). You will also need to use customExpCollapseEvent config provided with TouchTreeGrid. Refer also to "Advanced Features" section in the documentation.

Best regards,

27 Jun 2013, 3:41 AM
Hi ,
I am trying to integrate TouchTreeGrid (Census Type Grid) in one of my sample project . I am able to create the basic sample using "Notes on Implementation" section in "TouchTreeGrid Documentation.pdf". But when i tried the Advanced sample, i got an error in loadCensusMaine2000Store function, exception is happening in the following line in chrome debugger Console
var gridcont = me.getCensusmaine();
the exception messgae i got is
Uncaught TypeError: Object [object Object] has no method 'getCensusmaine'
but there is no definition found for 'getCensusmaine' in the sample project. I am very new to Sencha Touch 2 , Please help.

Thanks in advance

27 Jun 2013, 7:37 AM

As mentioned in private message issue is most likely a missing controller reference to #censusmaine.

Best regards,

9 Jul 2013, 5:45 PM
Summary: Minor updates to better support Dynamic grids and individual cell taps.

GITHUB Repository: https://github.com/swluken/TouchTreeGrid
( (https://github.com/swluken/TouchTreeGrid)refer to README.md file for demo links)

No configuration updates required. All changes are backward compatible to prior release.


- updateStore() method modified to auto-create temporary store if not defined within configuration for purposes of supporting dynamic grids without requiring creation and reference to temporary store.

- updateColumns() method updated to add 'dataIndex = "column name"' attribute to each cell DIV if columns[] array has newly supported addDataIndexToDiv=true config for that column. This inserts unique identifier for each cell DIV and allows for processing of unique cell tap (same method for how header cell tap works). Tap on CloseDate and ClosePrice columns for Horizontal scrolling and Dynamic grid examples.

- Refer to documentation "Lists => Horiz (DOW History Example with Horizontal Scrolling" (Program Flow section) on how to simulate a hyperlink sub-string within the text of a specific cell.

- Documentation updated per above. Refer to "Appendix C - Upgrading TouchTreeGrid component" in "TouchTreeGrid - Documentation.pdf" for how to upgrade your component within Architect.


- Column sorting within TreeGrid categories.
- Multi-column sorting feature
- Support initially sorted shading feature
- Column show/hide/add/update example with accompaning methods
- More renderer function examples
- Easy config options to auto-add buttons to footer to "auto-display" different sets of columns (or provide methods for custom buttons)
- Support for editable cells
- Possible support for locked columns
- Seeking interest on supporting config option to use Ext.dataview.DataView vs. Ext.dataview.List

16 Jul 2013, 11:11 PM
I'm looking at the TouchTreeGrid-Basic with the "Today, Tomorrow...etc" headers. Is it possible to add an item template to say display a checkbox as in the Ext.dataview.list.

I was interested in using it with check boxes and the item text.

16 Jul 2013, 11:41 PM
following on from the last post ..tried your example as in the doco with changing the contentItemTplOverride:

contentItemTplOverride: '<div style="background-color: white; padding-left: 2em; font-size: 1.2em;">{text}</div>'

and get an error

Uncaught TypeError: Object [object Object] has no method 'setContentItemTpl'

this is using the basic Architect project TouchTreeGrid_Basic_21
and occurs in the function updateColumns at the line

var content = me.setContentItemTpl(detail);

17 Jul 2013, 12:10 AM
my bad...contentItemTplOverride working fine.

Used part of your code and threw in some of mine:

<div style="background-color: white; padding-left: 2em; font-size: 1.2em;">{text}<span style="float:right;padding-right:2em"><input type="checkbox" name="chk{index}" checked>{index}</span></div>

Works perfectly...of course the index refers to the list item index which starts at 0 for each level but if I include a unique id for each item that should solfve it.

Then I can do a document.getElementsByName('chk'+{index})[0] to find out whether it is checked or not.

Thanks for putting this out.

17 Jul 2013, 8:47 PM
Hi Steve,

I am currently working on Sencha Touch 2 components, can TouchTreeGrid supports Drag and drop from another Sencha Touch 2 components or panels?


17 Jul 2013, 10:42 PM
Hi Steve,

you planned to enhance TouchTreeGrid to support for editable cells, may I know when will the enhancement be release?

19 Jul 2013, 6:53 AM
Sencha just announced new Touch Grid component for their 2.3 release (late August) and I just saw a presentation of it by the developer here at SenchaCon. We should all be gravitating to that assuming it meets our needs. Hence, I'm going to spend some time with the new grid component before making anymore enhancements to the simple list features of TouchTreeGrid. However, having spoken with Sencha Touch team members I don't get the sense we are going to see treegrid functionality in the near future, but it is planned. Given that, I intend to continue to support and enhance treegrid and accordion features supported by TouchTreeGrid until Sencha implements this functionality. Also note I've been told Sencha only plans to make the new Grid available to those who have purchased one of the bundles.

I would be curious to know how drag/drop for treegrids (as opposed to simple lists) would be used. Regarding cell editting, I will likely implement that, but don't have a timeline yet. With vacations coming up it might be a bit longer before I get the next release out.

Best regards,

5 Aug 2013, 4:48 PM
TouchTreeGrid rocks! :D ... It's so *badly* needed for Touch.
This control opens up many new touch app possibilities.

I'm likely to need to load a very large tree (25,000+ rows) which I'd prefer to dynamically lazy load from the server via the TreeStore on an as needed basis. I'd also like to restrict expands so the DOM does not explode. Is this feasible at the moment (or in the future) with this control?

Does the expand feature support an animated loading icon like ExtJS trees do? I don't think I saw this in the demos - maybe I missed it.


5 Aug 2013, 6:26 PM
Hi Tony,

I haven't implemented Lazy Loading yet for Touch but would think it should work using insertChild() method of Ext.data.NodeInterface. Let me know if you get it working. You can restrict expands by setting expanded false and DOM will not explode. Also, the component doesn't currently support animation but I will add it to the list of future enhancements. Thanks for your feedback!

Best regards,
Steve Luken

7 Aug 2013, 1:29 AM
Hi there

Firstly, thanks for this awesome component!

I am trying to get it to work using an ajax proxy (or jsonp proxy) for the TreeStore. I have your basic task example & trying to load the exact data from the example via a json proxy (tried via server & local json).
I have tried various techniques & measures to get it to load.

I have verified that the remote store loads fine, testing with the Sencha nested list component.
Using the exact same store for the basic TouchTreeGrid displays an empty list.

I have tried to hack the common controller to explicitly load the store - but my Sencha knowledge is not sufficient to make sense of what is going on. Ideally it would be great if the dynamic store worked as seamlessly as a store with inline data does.

Here is the modifed TouchTreeGrid.store.Task store config with the proxy:
config: {
autoLoad: true, // have tried with this set to true + false to try trigger the updateStore function
model: 'TouchTreeGrid.model.Task',
storeId: 'TaskStore',
proxy: {
type: 'ajax',
url: './data/task.json',
reader: {
type: 'json',
rootProperty: "items"

Any help would be much appreciated, I've been hacking at this for about 2 days.

7 Aug 2013, 2:52 AM

It appears you are bumping into the same Sencha bug that I did in the beginning which is why I all my examples load the TreeStore within the Controller via AJAX calls. This thread http://www.sencha.com/forum/showthread.php?252752-CollapsibleList-in-Sencha-2.1
discusses the same issue and it looks like mailmejanar posted a solution on Jan 7, 2013. Note that "TouchTreeGrid - documentation.pdf" discusses the program flow for loading treestore json file for "Project Ex#1" on page 22. Basically projectController.loadExample2Store() method calls commonController. loadStore() method to load ./data/treegrid.json. commonController.postLoadProcess() method is then called in the callback of the AJAX call to refresh the grid.

If none of this works for you feel free to send me private message with more details and I will try to get you up and running.

Best regards,

7 Aug 2013, 5:44 AM
Thank you so much! I have finally gotten it to work
I updated my store class with mailmejanar's fix. It was a no-brainer, with me expecting it not to work first time, but it worked like a charm. I then worked back to getting it to work with remote ajax & remote jsonp & it all works fine. As does loading the store on demand. The only strange thing I found it if I auto-load the list + explicitly load the store later on the list data appears twice in the list. This might be regular sencha behaviour though & easily addressed by removing the explicit loading of the store.
Thanks for the fast reply!

25 Aug 2013, 8:52 PM

- Download: https://github.com/swluken/TouchTreeGrid

- Modifications to support IE10

- Created 2.2 Basic version (./TouchTreeGrid_Basic_22/*.* files) which includes
appChrome29fix.html to run on Chrome 29+ (uses ChromeFix.css instead of
Sencha library CSS file)

- Modifications to support new CalendarPicker component. Demonstrates several new
capabilities with TouchTreeGrid including:

- Images in header/footer toolbar, in category rows and in individual cells
(see Christmas Calendar example)
- Gradients in Category rows
- Pass custom object defining custom items/buttons to add to auto-generated footer
- Hide expand/collapse buttons, but show custom buttons
- Dock footer toolbar containing expand/collapse + custom buttons to top
(i.e. above column headers)

- All new Calendar Picker examples found in ./CalendarPicker/ directory.
Refer to "CalendarPicker.pdf" in download for further discussion of supported features.

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

- "TouchTreeGrid - Documentation.pdf" updated for new configs.

See working CategoryPicker Demo:

Refer to CommitLog.txt for update summary.

Refer to "Appendix C - Upgrading TouchTreeGrid component" in
"TouchTreeGrid - Documentation.pdf" for how to upgrade your
component within Architect. BE SURE TO ALSO UPDATE TOUCHTREEGRID.CSS !!


- 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 locked columns
- Possible support for drag/drop
- Seeking interest on supporting config option to use Ext.dataview.DataView vs. Ext.dataview.List


- More examples including IPhone-style calendar layout
- Method+button to allow user to add more months to displayed calendar
- Auto-generation of re-occuring custom dates with descriptions (i.e. anniverseries, birthdates, meetings, etc)
- Day Planner support
- Feature to expand/collapse months using user-defined Function
- Horizontal scrolling calendars
- Speed up Expand All/ Collapse All for large calendars.
- Optional categorize by Year feature.
- Soliciting other good ideas to integrate with this component

11 Sep 2013, 8:04 PM
Hey, first of all well done on such a great and essential extension.

I'm having an issue with the positioning of the list items, depending on the size of the screen, the margins get messed up on the items that are just off the screen (some will overlap). Also when scrolling, the list items at the top will vanish before they're properly off-screen.
I have altered the CSS for standard lists, however they behave correctly, just the TTG is causing me grief.

Would you know where I can start looking?

13 Sep 2013, 2:36 AM

I would be interested to know if you have the same issues with the provided examples that use treegrids and if so that tells me its a specific browser or device that I have not tested on that needs to be fine tuned.

Otherwise, my first guess is that it is related to possible use of itemHeight<>47 pixels (Sencha's default) and variableHeights=true. CalendarPicker uses treegrid to expand/collapse the calendars and uses this configuration to set different row heights. I found that I had to set minHeight, maxHeight and height all with !important in my css to force particular heights while scrolling. Take a look at css selector
.x-touchtreegrid-list-calendar .touchtreegrid-list-categ {...}
in categorypicker.css (./CategoryPicker/resources/css/ directory) for an example.

You can send me private message with more details of your example if this doesn't help.

Best Regards,
Steve Luken

30 Sep 2013, 4:56 PM
Updated updateColumns() and doRefreshList() methods as follows:
- Replace all <p> tags with <div> tags in updateColumns() and doRefreshList() methods
when generating category, content and header row TPL. This allows for more flexibility
when generating HTML within calendar cells.
- Corrected bug with unmatched tag in updateColumns()
- Remove unnecessary DIVs in updateColumns() when arrowPctWidth, CategIndentPct are 0.
- Corrected bug in updateColumns() method when applying categColumns[] widths

Modifications that require updates to prior implementations: None.

Related Thread for CalendarPicker component:

9 Oct 2013, 5:15 PM
46256 46257

Added configs and methods to support multiple linked grids for synchronized scrolling and sorting.
Unlimitted combinations of Freeze columns in conjunction with horizontal scrolling columns supported
for both Simple Lists and Tree Grids.

Software can be downloaded at https://github.com/swluken/TouchTreeGrid

Demo at: http://www.gomainerentals.com//Sencha/TouchTreeGrid_FreezeColumn/app.html

Created simplified TouchTreeGrid_FreezeColumn project directory featuring the following:
1) Freeze column example for TreeGrids using US Census data.
2) Touch Freeze column example with data grouping simulating EXTJS 4.2 Kitchen Sink Big Data grid example
(utilizes Sencha provided BigData dummied json data)
3) Example of how to utilize headerTplOverride config to create grouped header columns
(Note: column sorting within sub-grouped headers not yet supported)
4) Refer to TouchTreeGrid_FreezeColumn.pdf in same directory for specific documentation on these examples.

Also added Tree Grid Census "Freeze Column" example to TTG_Slider project directory.

Modifications that require updates to prior implementations: None.

Related Thread for CalendarPicker component:


14 Oct 2013, 9:17 PM
Created new ./TTG_Slider2/ project directory that utilizes Ext.Menu component new in Touch 2.3.
Non-collapsible configuration of TouchTreeGrid list is implemented for the menu items.
This version of Slide Navigation corrects the prior issues for Windows 8 phones.

Software can be downloaded at https://github.com/swluken/TouchTreeGrid

README.md file on GitHub site contains demo links for TouchTreeGrid and CalendarPicker.

Refer to section titled: "Touch 2.3 Menu Implementation using TouchTreeGrid" in "TouchTreeGrid - documentation.pdf" for details of menu implementation.

Note: No modifications to TouchTreeGrid component itself with this release.

Steve Luken

15 Oct 2013, 6:56 PM

*** New TouchTreeGrid with Menu Example ***
Created new ./MenuEx/ project directory that simplifies how to utilize new Touch 2.3 Ext.Menu component using TouchTreeGrid for menu items. Also demonstrates other styles of Menus. All code implemented within Controller.

Software can be downloaded at https://github.com/swluken/TouchTreeGrid

See demo at: http://www.gomainerentals.com/Sencha/MenuEx/app.html

Steve Luken

27 Oct 2013, 8:13 AM
Added logic to controller launch() method for ./MenuEx/ project as workaround for menu left/right edge swipe as Sencha 2.3 codebase appears to have a bug. This logic should be removed once fixed.

Removed minHeight and maxHeight from "header" config for TouchTreegrid.js and updated TouchTreeGrid.css with height attribute. This allows Grid Headers to be totally configured via CSS instead of having to update "header" config of linked TouchTreeGrid instance everytime header height needs to be adjusted from default.

Refer to .touchtreegrid-header selector modifications in TouchTreeGrid.css

Modified onScroll() method of TouchTreeGrid.js to fix issue with synchronized scroller indicator.

Updated "TouchTreeGrid - Documenation.pdf" and all provided examples accordingly.

Software download plus demo links (see README.md) found at https://github.com/swluken/TouchTreeGrid

Steve Luken

18 Jun 2014, 6:31 AM

Is it possible to have a frozen column using a regular store with this component? I would like to use the freeze column functionality without the collapsable rows.

18 Jun 2014, 9:05 AM

Freeze column is supported for regular store in addition to tree store. Example found at http://www.gomainerentals.com//Sencha/TouchTreeGrid_FreezeColumn/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.

Refer to bigDataList.js view (TouchTreeGrid_FreezeColumn project directory downloaded from https://github.com/swluken/TouchTreeGrid) and note the following:

- '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.

Hope this helps,


18 Jun 2014, 9:18 AM
Thanks Steve. Your component is a life saver. I still don't understand how this functionality was not added to Touch Grid in 2.3. It seems necessary for a small screen to have a lock column.

8 Jul 2014, 10:26 PM
How can i load child items dynamically on parent item click?

In my application i wanted to load on click of parent. I am able to change the store data on parent item click, but in view its showing parent only. I have huge data, so its coming in below manner from web service.

Exmple JSON
on load grid, JSON looks like

"NODE_NAME":" Parent1",


Click on parent,JSON looks like
"NODE_NAME":" Parent1",
"NODE_NAME":" Child1",



Please help.

Thanks in Advance

9 Jul 2014, 7:27 PM

I uploaded sample code to https://github.com/swluken/TouchTreeGrid ("DynamicLoadEx2" directory) of at least one way to retrieve and update child nodes of a large tree store dynamically upon node expansion. You can listen for the "nodeItemTap" event published from TouchTreeGrid to add the child nodes dynamically. You would have to provide your own functionality for Expand/Collapse All. Note also that you need to provide sort on the tree store that would apply to all levels. Take a look at the onContainerNodeItemTap() method within CommonController.js. You can also take a look at the method used in EXTJS Kitchen Sink example to see if it will work in Touch: http://docs.sencha.com/extjs/4.2.2/#!/example/build/KitchenSink/ext-theme-neptune/ (Trees -> Tree Reorder) uses a proxy to automatically load the child nodes.

You can see a demo of this at: http://www.gomainerentals.com/Sencha/DynamicLoadEx2/index.html


R (http://www.gomainerentals.com/Sencha/DynamicLoadEx2/index.html)egards,

14 Jul 2014, 9:59 AM
Thanks a lot :)

4 Aug 2014, 5:08 AM
I am facing another issue. when i am trying to add child nodes, till 6 label its working fine. After that ,its appending in wrong position.

I did changes in TouchTreeGrid-master\DynamicLoadEx2\app\controller\CommonController.js only. other files unchanged.

below is my used js code for controller.

Ext.define('TouchTreeGrid.controller.CommonController', {
extend: 'Ext.app.Controller',

config: {
control: {
"container#categ": {
nodeItemTap: 'onContainerNodeItemTap'

onContainerNodeItemTap: function(container, list, index, target, record, e) {
var store = list.getStore(),
node = store.getAt(index),
i, newNode;

if (node.isExpanded()) {return;} // skip if collapsing node

if (node.hasChildNodes()) {return;} // child nodes already loaded so skip

for (i=0; i<1; i++) {
newNode =
"leaf" : false,
"CATEG" : record.get('CATEG') + ' - ' + "Dynamic Leaf "+(i+1).toString()

//node.appendChild(newNode); // APPEARS TO BE BUG WITH THIS METHOD
node.insertChild(i-1, newNode);

// NOTE: to get child nodes to sort under expanded node correctly, you need to maintain
// a sort string on the store that would apply to all rows of the store



Will you please look into this.


4 Aug 2014, 6:24 AM
Its happening because sorters property in store. But without that tree grid will not work.


6 Aug 2014, 6:29 PM

Thanks for bringing this to my attention. After extensive debugging I found that the issue was due to limitations with Sencha Touch's treeSortFn method within Ext.data.NodeStore. The provided sort method fails after about 5 levels or so (depends on the implementation). I have uploaded DynamicLoadEx2C project directory to https://github.com/swluken/TouchTreeGrid which includes ./app/overrides/NodeStore.js to override the default algorithm resolving the issue.

Note that to maintain sort on a TreeStore with dynamic nodes you need to define a sorter for the TreeStore itself which is used internally to sort all siblings for a given node depth. The treeSortFn is applied after the user-defined sorter and is dependent on internal node fields "depth" and "index". The provided override contains logic for using a sort field that would apply across the entire store if defined. Otherwise, I reduce some of the parameters from the original sort algorithm to allow it to work for more depths. You could also come up with your own tree sorter algorithm.

Working example found at: http://www.gomainerentals.com/Sencha/DynamicLoadEx2C/index.html



11 Oct 2014, 12:49 PM
First, this is a great tool,thank you.

Second, I need the touchtreegrid to load expanded initially and I can't seem to find the setting that will do that.

I've tried he defaultCollapseLevel=2 and set the applyDefaultCollapseLevel but it seems that nothing will show it initially expanded.

Please help.

13 Oct 2014, 8:04 AM
The issue is that after loading your data you need to make a call to TouchTreeGrid doRefreshList() method, which internally calls doExpandDepth() method. This gets called upon view initialization, but you need to call it manually if your data is being loaded after view initialization.

Take a look at TouchTreeGrid_Advanced_23 project example. CommonController.js => postLoadProcess() method calls doRefreshList() for a number of examples after the data is loaded.

Note that the default defaultCollapseLevel: 99 essentially means expand all so you shouldn't have to provide this config. Similarly, applyDefaultCollapseLevel: true is the default so you don't need to specify that either.

As a side, if you wanted to customize the expanded nodes similar to to the Project Examples you would update "expanded" field in your store (this field is added for you automatically for TreeStores), and you would set applyDefaultCollapseLevel: false


23 Nov 2014, 12:30 PM
New version of TouchTreeGrid uploaded to: https://github.com/swluken/TouchTreeGrid


TTG_Slider_2.4 project upgraded to Touch 2.4
Added configs to support conditional row styling for standard grids
(already supported for tree grids)
Added examples of CheckColumn for both tree grid and standard grids

12 Jan 2015, 7:41 PM
TouchTreeGrid now supports embedded Forms within TreeGrids with minimal additional configuration. Forms can be embedded in Content rows (aka Leafs) and/or Category rows.

See demo at: http://www.gomainerentals.com/Sencha/TTG_Forms/index.html
(works on Android/iOS devices and Chrome browser, but some issues with Firefox/IE )


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.

Download latest version from: https://github.com/swluken/TouchTreeGrid

Detailed documentation found in TTG_Forms project directory (TTG_Forms.pdf)

Known Limitations

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).


22 Jan 2015, 5:53 PM
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.

Download at: https://github.com/swluken/TouchTreeGrid
**Don't forget to STAR this repository in GITHUB to be notified of frequent enhancements !!


Updated following projects to latest version of TouchTreeGrid using Touch 2.4 framework:

- TTG_KitchenSink (new) - Includes (or provides links) to all TouchTreeGrid examples
> Tablet Demo:
> Phone Demo (be sure to resize your browser!):
> Be sure to click on help links for details on each example
> See also TouchTreeGrid-Documentation.pdf from download
> Appendix D - TouchTreeGrid config definitions

- TTG_LockedColumns (new) - See TTG_LockedColumns.pdf in project directory for detailed documentation
> TreeGrid example implements pinch event and buttons to resize grid

- CalendarPicker - review CalendarPicker.pdf from download

- TTG_Forms - recent "work in progress" example of grids with embedded forms

Refer to ChangeLog.txt for more details on this release.

Best regards,
Steve Luken

10 Mar 2016, 11:05 AM
How can I change the column header text from a column from Touchtreegrid using a command?

I'm using Touch 2.4.x

11 Mar 2016, 2:18 PM

Using sample code TouchTreeGrid.view.Dow2012Basic2Cont.js as an example:

Add itemId to the column you want to update.

header: 'CloseDate',
itemId: 'myColumn',
dataIndex: 'CloseDate',
width: '4.5rem',
style: 'text-align: center; font-weight: bold; color: #008abc;',
headerStyle: 'text-align: center; color: #ccc;',
renderer: 'Ext.Date.format(values.CloseDate, "n/j/Y")',
sortable: true

You can process some event in TouchTreeGrid.controller.ListsController.js:

var dow2012Basic2Cont = this.getDow2012Basic2Cont();

var myColumn = dow2012Basic2Cont.down('#myColumn').

myColumn.header = 'My new text';

// To repaint the header...
var dow2012 = dow2012Basic2Cont.down("#dow2012");


14 Mar 2016, 5:55 AM

4 Apr 2016, 4:55 AM
i try example 2 and its great, now i want to change the header in js How to do this?

Ext.define('app.view.Example2Bcontainer', {

extend: 'Ext.Container',
alias: 'widget.example2Bcontainer',

requires: [

config: {
// itemId: 'example2Bcontainer',
layout: 'card',

items: [
xtype: 'touchtreegrid',
store: Ext.create('app.store.ProjectsStore', { fullscreen: true }),
onItemDisclosure: true,
columns: [

header: 'Agent',
dataIndex: 'category',

width: '50%',
style: 'text-align: left;font-size:10px',
categStyle: 'font-weight: bold; text-align: left; color: #f4f4f4;font-size:12px',
headerStyle: 'text-align: left; color: white;'
header: master.touchtreegridarrheader1,
dataIndex: 'value',
width: '20%',
style: 'text-align: center; padding-left: .5em;font-size:10px',
categStyle: 'text-align: center;padding-left: .5em;font-size:12px',
headerStyle: 'text-align: center; color: white;padding-left: .5em;'
header: master.touchtreegridarrheader2,
dataIndex: 'value1',
width: '20%',
style: 'text-align: center;font-size:10px',
categStyle: 'text-align: center;font-size:12px',
headerStyle: 'text-align: center; color: white'
}/* ,{
header: 'Done?',
dataIndex: 'done',
width: '15%',
style: 'text-align: right; font-size: .6em;',
categStyle: 'text-align: right;font-size: .6em;',
headerStyle: 'text-align: right; color: #ccc;'
variableHeights: false,
itemHeight: 32,
listItemId: 'example2Blist',
includeFooter: true,
includeFooterLevels: true,
categDepthColors: true,
categDepthColorsArr: [
categDepthColorButtons: true,
includeHeader: true,
applyDefaultCollapseLevel: false,
helpHtml: './resources/html/Project2Example.html',
categCssArr: [
cls: [
// itemId: 'example2B'


chart = new Ext.create('app.view.Example2Bcontainer', {});

i want to change dynamic header Agent to Customer


4 Apr 2016, 2:40 PM
I added following to my previous reply regarding how to update the header:

// To repaint the header...
var dow2012 = dow2012Basic2Cont.down("#dow2012");

If you take a look at the TouchTreeGrid.js doRefreshList() method you will see how the HTML for the header is constructed and then updated. Note this method refreshes the entire grid. You can just call this method or create a custom method that just refreshes the header.


7 Sep 2016, 10:35 PM
Is there any update regarding the calendar list view?

28 Mar 2017, 6:46 AM
Hi Steve,
I'd like to ask you for a method to get neighboring cells. Let me explain better:
When a cell is tapped, I highlight it adding a custom class .touchtreegrid-simplelist-cell-activeto it. Then I have arrow buttons (up/down/left/right) to navigate between cells.
When I tap a button, I would love to know how you would unmark (remove the active class) the current selected cell, and highlight the adjacent one. My main problem is that I don't know how to access the DOM element of the adjacent cell.
Thank you