TouchTreeGrid component

Hi,

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

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:
http://www.sencha.com/forum/showthread.php?270677-Touch-CalendarPicker-Component&p=999941#post999941

Regards,
Steve

Attachment 46256 Attachment 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//Sench...olumn/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:
http://www.sencha.com/forum/showthre...941#post999941


Regards,
Steve

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.

Regards,
Steve Luken

Attachment 46347

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

Regards,
Steve Luken

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

Regards,
Steve Luken

Steve,

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.

Hi,

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


Attachment 49397

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.

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

{
"children":[
{
"ITEM_SEQUENCE_NBR":1,
"NODE_NAME":" Parent1",
"PERIOD_ID":2694,
"ID":"1",
"CEA":488901.44709,
"CSA":203628.3479,
"WORLD":75819.65152,
"TOTAL":2743408.46906

}]
}


Click on parent,JSON looks like
{
"children":[
{
"ITEM_SEQUENCE_NBR":1,
"NODE_NAME":" Parent1",
"PERIOD_ID":2694,
"ID":"1",
"CEA":488901.44709,
"CSA":203628.3479,
"WORLD":75819.65152,
"TOTAL":2743408.46906,
"children":[
{
"ITEM_SEQUENCE_NBR":1.1,
"NODE_NAME":" Child1",
"PERIOD_ID":500,
"ID":"1",
"CEA":200,
"CSA":20,
"WORLD":52,
"TOTAL":500


}]

}]
}


Please help.

Thanks in Advance