PDA

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



bogc
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?

Thanks


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

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

<!DOCTYPE html>

<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: []
}]
}]
;

App.TreePanel1.setRootNode(nodes[0]);
}
</script>
<Style>
.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;
}
</Style>
</head>
<body>
<form runat="server">
<ext:ResourceManager runat="server" SourceFormatting="True"/>

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

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

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

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

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

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


<ext:TreePanel
ID="TreePanel1"
runat="server"
Width="600"
Height="450"
Icon="BookOpen"
Title="Catalog"
AutoScroll="true"
RootVisible="False"
RowLines="True"
ContextMenuID="TreeContextMenu">
<TopBar>
<ext:Toolbar runat="server">
<Items>
<ext:Button ID="Button1" runat="server" Text="Expand All">
<Listeners>
<Click Handler="#{TreePanel1}.expandAll();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button2" runat="server" Text="Collapse All">
<Listeners>
<Click Handler="#{TreePanel1}.collapseAll();" />
</Listeners>
</ext:Button>
<ext:Button ID="Button3" runat="server" Text="Load Nodes">
<Listeners>
<Click Handler="loadMenu();" />
</Listeners>
</ext:Button>
</Items>
</ext:Toolbar>
</TopBar>
<ColumnModel>
<Columns>
<ext:TreeColumn runat="server" Text="Test" Width="200" DataIndex="text"/>
<ext:Column runat="server" DataIndex="action" Text="Icon"></ext:Column>
<ext:ImageCommandColumn runat="server" >
<Commands>
<ext:ImageCommand Icon="StopRed" />
</Commands>
</ext:ImageCommandColumn>
</Columns>
</ColumnModel>
<Store>
<ext:TreeStore runat="server">
<Model>
<ext:Model runat="server">
<Fields>
<ext:ModelField runat="server" Name="action" Type="String"></ext:ModelField>
</Fields>
</ext:Model>
</Model>
</ext:TreeStore>
</Store>
<CustomConfig>
<ext:ConfigItem Name="rowLines" Value="true" />
</CustomConfig>
<Root>
<ext:Node>
<Children>
<%-- 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;">
<CustomAttributes>
<ext:ConfigItem Name="action" Mode="Value" Value="&lt;div class='commentAdd treegrid-column-command-icon' data-column='{1}'&gt;&amp;nbsp;&lt;/div&gt;"/>
</CustomAttributes>
</ext:Node>
<ext:Node Text="No. 1 - C" Icon="Music" Leaf="true" Qtip="&amp;amp;lt;test&amp;amp;gt;"/>
</Children>
</ext:Node>

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

<SelectionModel>
<ext:RowSelectionModel runat="server" Mode="Single" AllowDeselect="False"></ext:RowSelectionModel>
</SelectionModel>
</ext:TreePanel>
</form>
</body>
</html>

Daniil
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.

Daniil
Apr 03, 2013, 6:49 AM
I reported to Sencha.
http://www.sencha.com/forum/showthread.php?260320

Let's wait what they will answer.

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

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

Sencha opened a bug.

We created an Issue to monitor.
https://github.com/extnet/Ext.NET/issues/185

bogc
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.

Thanks

Update:

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:


Ext.suspendLayouts();
App.treePanel.suspendEvents(false);
App.treePanel.expandAll();
App.treePanel.resumeEvents();
Ext.resumeLayouts(true);

Daniil
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.