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.
TouchTreeGrid rocks! ... 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.
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!
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:
autoLoad: true, // have tried with this set to true + false to try trigger the updateStore function
Any help would be much appreciated, I've been hacking at this for about 2 days.
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.
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!
Last edited by tracy.touchwork; 7 Aug 2013 at 5:45 AM.
- 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.
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.