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

Steve,

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:

[
{header:'name',dataIndex:'name',width:'25%'},
{header:'category',dataIndex:'category',width:'25%'},
]

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


Any clues?

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,
Steve

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

Thanks,
Shawn

Thanks this looks very great!
It would be cool if the treegrid can handle selections of rows.

Hi,

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,
Steve

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

{
xtype:'button',
text: 'Investors',
handler: function () {
var sto = Ext.getStore('Contactsstore');
console.log(sto.getAt(0));
// clear all existing filters
sto.clearFilter();
sto.filter('title', 'Investors');
}
},

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

I found a few threads out there and Sencha Support responded that TreeStores don't support filtering:
http://www.sencha.com/forum/showthread.php?257019
http://www.sencha.com/forum/showthread.php?253644

"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:
http://docs.sencha.com/touch/2.2.1/#....NodeInterface

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

Attachment 44140
NEW FEATURES AND EXAMPLES

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


OTHER NEW FEATURES:
- 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.

Attachment 44391


NEW FEATURES AND EXAMPLES


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


PLANNED ENHANCEMENTS:

- 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

Hi, in "Dynamic" example, vertical scrolling is not working properly, you can't see all the rows.


Attachment 44430Attachment 44431

Thanks for the report. I removed "height: 1000" config from the examples and updated GITHUB repository.

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.

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

Hi,

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/...let-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,
Steve

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
Arun

Hi,

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

Best regards,
Steve

Summary: Minor updates to better support Dynamic grids and individual cell taps.

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


*** MODIFICATIONS THAT REQUIRE UPDATES TO PRIOR IMPLEMENTATIONS ***
No configuration updates required. All changes are backward compatible to prior release.


*** ENHANCEMENTS TO TOUCH 2.2x TOUCHTREEGRID VERSION COMPONENT (2.1x version not updated) ***


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

PLANNED ENHANCEMENTS:

- 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

Hi,
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.

Hi,
following on from the last post ..tried your example as in the doco with changing the contentItemTplOverride:

Code:

---

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

---

and get an error

Code:

---

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

Code:

---

varcontent=me.setContentItemTpl(detail);

---

Hi,
my bad...contentItemTplOverride working fine.

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

Code:

---

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

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?

Thanks.

Hi Steve,

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

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,
Steve

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.

Thanks
Tony.

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

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.

Hi,

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/showthre...-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,
Steve

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!

NEW FEATURES AND EXAMPLES

- 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
toolbar
- 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/showthre...cker-Component

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

See working CategoryPicker Demo:
http://www.gomainerentals.com/Sencha...icker/app.html

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 !!


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

PLANNED ENHANCEMENTS TO CalendarPicker:


- 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

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?