PDA

View Full Version : [CLOSED] Migrating TriState TreePanel



acrossdev
Jan 17, 2013, 5:00 AM
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:

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.

Daniil
Jan 17, 2013, 8:15 AM
Hi @acrossdev,

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