[2.2] Tri-state tree/Tree with themed checkbox [NEW v1.2]

[rtconner]

Also, I am completely unable to get it to work with AsyncTreeNode. Do you think I need to try harder, or is that not build into this?

[Condor]

@rtconner: Your example doesn't set the uiProvider for all child nodes. Either set the uiProvider in the baseAttrs of the tree loader (as I did) or specify the uiProvider in every child node (see the ColumnTree example). This also applies to AsyncTreeNode!

@fermo111: It supports an 'unlimited' number of branches. Your example must be flawed somewhere, because I am able to add a number of extra levels without any problem.

ps. TriStateNodeUI does require that you fill the checked config option of the nodes correctly on startup!

[fermo111]

After working with my new tree a few days I noticed a few problems:

1. The margin:0 1px should be removed from the CSS (it causes cursor flickering).

2. In the example:
- Click 'Column Tree Example' (now 'Abstract rendering in TreeNodeUI', 'Create TreePanel to render and lock headers' and 'Test and make sure it works' look unchecked (but aren't).
- Click 'Test and make sure it works'. Now 'Test and make sure it works' is unchecked and 'Abstract rendering in TreeNodeUI' and 'Create TreePanel to render and lock headers' show their checked state again.

I would like your input in this one: Is this really a problem? Because fixing it would require to actually update the checked state of children which could be slow and doesn't even work correctly in an AsyncTreeNode.

This was really the reason why I thought it didn't work when adding an additional level.
Since you ask, I would say the TreeNodeUI should implement the expected behaviour as the user perceives it, that is, when you uncheck a parent node, all the children are really unchecked as well. I understand there is a problem with the AsyncTreeNode, but maybe the AsyncTreeNode is not the right class to use for a control of this kind, or, keeping the async nature of the tree, you could apply the user choices on the parent node to the children nodes that are loaded later.

Thanks

Luca

[nicola_java]

Nice job. Thanks for sharing.

[skaue]

I can't get the checkboxes to show in my tree. I have one root with two async children. Here is my setup:

                /******
                TREE
                ****/
                var tree = new xt.TreePanel({
                    title: 'Mapper',
                    collapsible: false,
                    animCollapse: false,
                    border: true,
                    rootVisible: false,
                    id: "tree_referencearchive",
                    autoScroll: true,
                    animate: false,
                    enableDD: true,
                    containerScroll: true,
                    width: 300,
                    minSize: 175,
                    maxSize: 400,
                    useArrows: true,
                    split: true,
                    region: 'west',
                    collapsible: true,
                    collapsed: false,
                    useSplitTips: true,
                    listeners:
                    {
                        click: function(node)
                        {
                            var store = files.getStore();
                            store.baseParams.id = node.attributes.id;
                            store.load();
                        }
                    },
                    baseAttrs: {
                        uiProvider: Ext.tree.TriStateNodeUI,
                        checked: false
                    }
                });
                var root = new xt.TreeNode({
                    text: 'Referansedokumenter',
                    allowDrag: false,
                    id: 'tree_root',
                    draggable: false,
                    preloadChildren: true,
                    baseAttrs: {
                        uiProvider: Ext.tree.TriStateNodeUI,
                        checked: false
                    }
                });

                root.appendChild(new xt.AsyncTreeNode(
                {
                    id: 'tags',
                    text: 'Kategorier',
                    icon: '/content/images/icons/tag_blue.png',
                    allowDrag: false,
                    loader: new xt.TreeLoader({
                        dataUrl: '/ReferenceArchive/GetTagsTree/',
                        preloadChildren: true,
                        baseAttrs: {
                            uiProvider: Ext.tree.TriStateNodeUI,
                            checked: false
                        }
                    })
                }));
                root.appendChild(new xt.AsyncTreeNode(
                {
                    id: 'fmentity',
                    text: 'Fasiliteter',
                    icon: '/Content/images/icons/chart_organisation.png',
                    allowDrag: false,
                    loader: new xt.TreeLoader({
                        dataUrl: '/FacilitCore/GetTreeJson/',
                        preloadChildren: true,
                        baseAttrs: {
                            uiProvider: Ext.tree.TriStateNodeUI,
                            checked: false
                        }
                    })
                }));
                tree.setRootNode(root);

Why can't I get this treestate to work. There are no errors, simply no checkboxes.

[Condor]

You are putting the checked config option in baseAttrs of the loader, but it should be in the config of the node itself.
Putting it in baseAttrs doesn't help, because that will copy the checked config option to the node instead of the node attributes.

[skaue]

baseParams? are they the same as baseAttrs? I feel confused

[BrainDrain]

Could some one make text nodes line wrapping for tree?
It will be very useful for long node text labels!

[skaue]

Could some one make text nodes line wrapping for tree?
It will be very useful for long node text labels!

I simply use qtip so if strings are long, the user can always hover over it and see the full text. Similar to how it works in filebrowsers.

[Condor]

Could some one make text nodes line wrapping for tree?
It will be very useful for long node text labels!

You could use:

.x-tree-node a span {white-space: normal;}

(but I don't think you'll like the result)