View Full Version : [OPEN] [#185] TreePanel context menu issue

Apr 03, 2013, 3:39 AM
I have the following issue reproducible through the code below, using Ext.Net 2.1.1.

Steps to reproduce:

1. Run the page and click on the Load Nodes button
2. Select the node and right-click. The context menu should show up but if you look closely a little square is displayed where the menu should be.

Please note that I am using the resumeLayouts/suspendLayouts calls in order to speed up the expansion of the nodes (the actual tree is big).

If I right-click on the tree before step 1 to display the context menu, step 2 works properly after loading the nodes.

If I remove the calls to resumeLayouts/suspendLayouts the code works fine as well.

Any idea of what could it be?


<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<!DOCTYPE html>

<head runat="server">
<title>Multi Node TreePanel built using markup - Ext.NET Examples</title>
<link href="/resources/css/examples.css" rel="stylesheet" />
<script type="text/javascript">
// Ext.tree.View.override({
// collectData: function (records) {
// var data = this.callParent(arguments),
// rows = data.rows,
// len = rows.length,
// i = 0,
// row, record;
// for (; i < len; i++) {
// row = rows[i];
// record = records[i];
// if (record.get('qtip')) {
// row.rowAttr = 'data-qtip="' + Ext.util.Format.htmlEncode(record.get('qtip')) + '"';
// if (record.get('qtitle')) {
// row.rowAttr += ' ' + 'data-qtitle="' + Ext.util.Format.htmlEncode(record.get('qtitle')) + '"';
// }
// }
// if (record.isExpanded()) {
// row.rowCls = (row.rowCls || '') + ' ' + this.expandedCls;
// }
// if (record.isLeaf()) {
// row.rowCls = (row.rowCls || '') + ' ' + this.leafCls;
// }
// if (record.isLoading()) {
// row.rowCls = (row.rowCls || '') + ' ' + this.loadingCls;
// }
// }
// return data;
// }
// });

function loadMenu()
var nodes =

id: "0",

children: [{
id: "CFVR41",
//iconCls: "icon-fugue16-Document",
qtip: "CSF File",
text: "some text.csv",
expanded: true,
leaf: true,
CsfVldRsltExpandAllMenuOptionApplicable: "0",
Context: "",
children: []

.bold_text { font-weight: bold !important;}

.treegrid-column-command-icon {
background-repeat: no-repeat;
background-position: 7px 0px !important;
width: 30px;
line-height: 16px;

.treegrid-column-action-icon {
background-repeat: no-repeat; background-position: 0px 3px;padding-top: 0px !important;

.treegrid-column-command-icon2 {
background-repeat: no-repeat; background-position: 12px 0px;padding-top: 0px !important;

.treegrid-column-action-icon_0_0 {
background-repeat: no-repeat; background-position: 0px 0px;

.commentAdd {
background-image: url(../../../../resources/icons/comment_add.png);

.x-tree-panel.x-grid-with-row-lines .x-grid-cell-inner {
padding-bottom: 0px;
<form runat="server">
<ext:ResourceManager runat="server" SourceFormatting="True"/>

<h1>Multi Node TreePanel built using markup</h1>

<ext:Menu ID="TreeContextMenu" runat="server">
<ext:Label ID="NodeName" runat="server" Cls="bold-text" />
<ext:MenuSeparator />
<ext:MenuItem ID="MenuItem1" runat="server" Text="Edit" Icon="Pencil">
<Click Handler="#{TreePanel1}.editingPlugin.startEdit(#{TreePanel1 }.menuNode, 0);" />

<ext:MenuItem ID="MenuItem2" runat="server" Text="Rename to 'TEST'" Icon="Pencil">
<Click Handler="#{TreePanel1}.editNode(#{TreePanel1}.menuNode, 'text', 'TEST');" />

<ext:MenuItem ID="MenuItem3" runat="server" Text="Remove" Icon="Delete">
<Click Handler="#{TreePanel1}.removeNode(#{TreePanel1}.menuNode);" />

<ext:MenuItem ID="MenuItem4" runat="server" Text="Append child" Icon="Add">
<Click Handler="#{TreePanel1}.appendChild(#{TreePanel1}.menuNode, 'New');" />

<ext:MenuItem ID="MenuItem5" runat="server" Text="Insert before this node" Icon="ArrowRight">
<Click Handler="#{TreePanel1}.insertBefore(#{TreePanel1}.menuNode, 'New');" />
<Show Handler="#{NodeName}.setText(this.nodeName);" />

<ext:Toolbar runat="server">
<ext:Button ID="Button1" runat="server" Text="Expand All">
<Click Handler="#{TreePanel1}.expandAll();" />
<ext:Button ID="Button2" runat="server" Text="Collapse All">
<Click Handler="#{TreePanel1}.collapseAll();" />
<ext:Button ID="Button3" runat="server" Text="Load Nodes">
<Click Handler="loadMenu();" />
<ext:TreeColumn runat="server" Text="Test" Width="200" DataIndex="text"/>
<ext:Column runat="server" DataIndex="action" Text="Icon"></ext:Column>
<ext:ImageCommandColumn runat="server" >
<ext:ImageCommand Icon="StopRed" />
<ext:TreeStore runat="server">
<ext:Model runat="server">
<ext:ModelField runat="server" Name="action" Type="String"></ext:ModelField>
<ext:ConfigItem Name="rowLines" Value="true" />
<%-- this shows properly --%>
<%-- the qtip is empty for this one --%>
<ext:Node Text="No. 1 - C" Icon="Music" Leaf="true" Qtip="&amp;lt;test&amp;gt;">
<ext:ConfigItem Name="action" Mode="Value" Value="&lt;div class='commentAdd treegrid-column-command-icon' data-column='{1}'&gt;&amp;nbsp;&lt;/div&gt;"/>
<ext:Node Text="No. 1 - C" Icon="Music" Leaf="true" Qtip="&amp;amp;lt;test&amp;amp;gt;"/>

<ext:StatusBar ID="StatusBar1" runat="server" AutoClear="1500" />
Handler="#{StatusBar1}.setStatus({text: 'Node Selected: <b>' + record.data.text + '<br />', clear: false});"
Handler="#{StatusBar1}.setStatus({text: 'Node Expanded: <b>' + item.data.text + '<br />', clear: false});"
Handler="#{StatusBar1}.setStatus({text: 'Node Collapsed: <b>' + item.data.text + '<br />', clear: false});"
<BeforeItemExpand Handler="Ext.suspendLayouts();"/>
<AfterItemExpand Handler="Ext.resumeLayouts(true);"/>

<ext:RowSelectionModel runat="server" Mode="Single" AllowDeselect="False"></ext:RowSelectionModel>

Apr 03, 2013, 5:55 AM
Hi @bogc,

Reproduced. Thank you for the report.

Please try the following as a workaround.

<BeforeItemExpand Handler="this.suspendLayout = true;"/>
<AfterItemExpand Handler="this.suspendLayout = false; this.doLayout();" />

I am working on a pure ExtJS test case to report them.

Apr 03, 2013, 6:49 AM
I reported to Sencha.

Let's wait what they will answer.

Apr 03, 2013, 6:50 PM
Thank you, Daniil for the workaround and for submitting the issue to Sencha.

Apr 04, 2013, 5:36 AM
You are welcome:)

Sencha opened a bug.

We created an Issue to monitor.

Apr 11, 2013, 6:20 PM
It seems that they are not going to fix this.

I have one more question, if I wanted to leave the calls to suspendLayouts there, as opposed to using the suspendLayout property (using suspendLayouts might be slightly faster - I need to do more testing with bigger trees though to confirm it for sure) is there another workaround to this, sort of plan B?

Perhaps, could I render the menu and then hide it, to make sure it will always show up.



After more thorough testing I came to the conclusion that there is no difference in performance between the two solutions. So, forget I asked the question.

One thing to mention though, setting the BeforeItemExpand/AfterItemExpand handlers slows down the call to the TreePanel expandAll(). They should be turned off before the expandAll call, then they should be turned them back on. This works fine:


Apr 12, 2013, 5:33 AM
It seems that they are not going to fix this.

Yes, probably, they aren't for ExtJS 4. Though, maybe, we will come up with something.

Perhaps, could I render the menu and then hide it, to make sure it will always show up.

Yes, I think it is possible.

They should be turned off before the expandAll call, then they should be turned them back on.

A good idea.