Jan 17, 2013, 4:00 AM
[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:
This was done by inheriting from the Ext.Net.TreePanel class, and using custom UIProviders for TreeNodes of the two aforementioned types.
I had a need to display a tree with tristate checkboxes for parent nodes and ordinary ones for leaf nodes:
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]