Dynamic Load of TreeStore Child Nodes with Example
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/#...theme-neptune/ (Trees -> Tree Reorder) uses a proxy to automatically load the child nodes.
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.
Getting TouchTreeGrid to Expand All after Data Load
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
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.
Detailed documentation found in TTG_Forms project directory (TTG_Forms.pdf)
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).
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.