[CLOSED] Migrating TriState TreePanel

  1. #1

    [CLOSED] Migrating TriState TreePanel

    Hello, I am migrating my code from Ext.Net 1 to Ext.Net 2.

    I had a need to display a tree with tristate checkboxes for parent nodes and ordinary ones for leaf nodes:

    Click image for larger version. 

Name:	TriStateTree.png 
Views:	130 
Size:	9.3 KB 
ID:	5432

    This was done by inheriting from the Ext.Net.TreePanel class, and using custom UIProviders for TreeNodes of the two aforementioned types.

        public class TriStateTreePanel: Ext.Net.TreePanel
        {
            public TriStateTreePanel(Config config)
                : base(config)
            {
                // Register custom node UI providers
                var loader = new ComponentLoader 
                {
                    PreloadChildren = true
                };
    
                loader.UIProviders.Add(new Ext.Net.TreeNodeUIProvider()
                {
                    Alias = "TriStateLeaf",
                    ClassName = "MyNamespace.LeafNodeUI"
                });
                loader.UIProviders.Add(new Ext.Net.TreeNodeUIProvider()
                {
                    Alias = "TriState",
                    ClassName = "MyNamespace.NodeUI"
                });
    
                Loader.Add(loader);
            }
    
            public override string XType
            {
                get
                {
                    return "tristatetreepanel";
                }
            }
    
            public override string InstanceOf
            {
                get
                {
                    return "MyNamespace.TriStateTreePanel";
                }
            }
        }
    This is how I would insert nodes:
        // For a parent node
        Node rootNode = new Node()
        {
            UIProvider = "TriState",
            Expanded = true,
            Cls = "DisplayNone"
        };
        tpTree.Root.Add(rootNode);
    I also had a corresponding JS file with some additional logic of tristate checkbox rendering and handling of its events.
    Ext.extend(MyNamespace.TriStateLeafNodeUI, Ext.tree.TreeNodeUI,
    {
        // some code ...
    
        renderElements: function(n, a, targetNode, bulkRender)
        {
            // add some indent caching, this helps performance when rendering a large tree
            this.indentMarkup = n.parentNode ? n.parentNode.ui.getChildIndent() : '';
    
            var cb = a.checked !== undefined;
            var href = a.href ? a.href : Ext.isGecko ? "" : "#";
            var buf = ['<li class="x-tree-node"><div ext:tree-node-id="', n.id, '" class="x-tree-node-el x-tree-node-leaf x-unselectable ', a.cls, '" unselectable="on">',
                '<span class="x-tree-node-indent">', this.indentMarkup, "</span>",
                '<img src="', this.emptyIcon, '" class="x-tree-ec-icon x-tree-elbow" />',
                '<img src="', a.icon || this.emptyIcon, '" class="x-tree-node-icon', (a.icon ? " x-tree-node-inline-icon" : ""), (a.iconCls ? " " + a.iconCls : ""), '" unselectable="on" />',
                cb ? ('<img src="' + this.emptyIcon + '" class="x-tree-checkbox' + (a.checked === true ? ' x-tree-node-checked' : (a.checked !== false ? ' x-tree-node-grayed' : '')) + '" />') : '',
                '<a hidefocus="on" class="x-tree-node-anchor" href="', href, '" tabIndex="1" ',
                a.hrefTarget ? ' target="' + a.hrefTarget + '"' : "", '><span unselectable="on">', n.text, "</span></a></div>",
                '<ul class="x-tree-node-ct" style="display:none;"></ul>',
                "</li>"].join('');
            var nel;
            if (bulkRender !== true && n.nextSibling && (nel = n.nextSibling.ui.getEl()))
            {
                this.wrap = Ext.DomHelper.insertHtml("beforeBegin", nel, buf);
            } else
            {
                this.wrap = Ext.DomHelper.insertHtml("beforeEnd", targetNode, buf);
            }
    
            this.elNode = this.wrap.childNodes[0];
            this.ctNode = this.wrap.childNodes[1];
            var cs = this.elNode.childNodes;
            this.indentNode = cs[0];
            this.ecNode = cs[1];
            this.iconNode = cs[2];
            var index = 3;
            if (cb)
            {
                this.checkbox = cs[3];
                index++;
            }
            this.anchor = cs[index];
            this.textNode = cs[index].firstChild;
        }
        
        // some code ...
    });
    Unfortunately, TreeNode has been replaced by Node in Ext.Net 2 and it also doesn't have a conception of UIProvider. Please advise what I can use to achive the same behaviour I had with Ext.Net 1.
    Last edited by Daniil; Jan 22, 2013 at 4:06 AM. Reason: [CLOSED]
  2. #2
    Hi @acrossdev,

    This thread is worth to read.
    http://www.sencha.com/forum/showthread.php?144236

Similar Threads

  1. Help Migrating treepanel node events to 2.0
    By MikeWallaroo in forum 2.x Help
    Replies: 0
    Last Post: Nov 02, 2012, 5:13 PM
  2. [CLOSED] Migrating from v1.5 to 2.0.1 differences.
    By ViDom in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 27, 2012, 1:47 PM
  3. [CLOSED] Migrating to 2: TreePanel loader
    By PhilG in forum 2.x Legacy Premium Help
    Replies: 11
    Last Post: May 18, 2012, 3:24 PM
  4. [CLOSED] Migrating a MVC App from v1 to v2
    By RCN in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 10, 2012, 7:05 PM

Tags for this Thread

Posting Permissions