PDA

View Full Version : [CLOSED] Tree Panel not work for me in usercontrol.



stoque
Jun 12, 2012, 9:20 PM
Hi,

I'm have problens with TreePanel in UserControl.

Error:
Cannot set property 'nodeName' of undefined

I noticed that the menu is undefined.

I'm basing this example:
http://examples2.ext.net/#/TreePanel/Advanced/Remote_Mode/

When I set the property ContextMenu the menu appears, but the error remains.

My code:

Parent page

<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Site.Master" CodeBehind="CategoryForm.aspx.cs"
Inherits="Laricao.CategoryForm" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Src="~/UserControls/UCCreateCategory.ascx" TagPrefix="uc" TagName="category" %>

<asp:Content ID="ContentCategory" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<ext:TabPanel ID="TabPanelCategory" runat="server" EnableTabScroll="true" AutoScroll="true"
LayoutOnTabChange="true">
<Plugins>
<ext:TabMenu ID="TabMenuPanelGeral" runat="server" />
</Plugins>
<Items>
<ext:FormPanel ID="FormPanelCategory" runat="server" Icon="Folder" Title="Cadastrar e visualizar categorias"
Layout="FitLayout">
<Content>
<uc:category runat="server" />
</Content>
</ext:FormPanel>
</Items>
</ext:TabPanel>
</asp:Content>

User Control


<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UCCreateCategory.ascx.cs"
Inherits="Laricao.UserControls.UC_Category" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script type="text/javascript">
var filterTree = function (tf, e) {
var tree = App.TreePanelCategory,
text = tf.getRawValue();

tree.clearFilter();

if (Ext.isEmpty(text, false)) {
return;
}

if (e.getKey() === Ext.EventObject.ESC) {
clearFilter();
} else {
var re = new RegExp(".*" + text + ".*", "i");

tree.filterBy(function (node) {
return re.test(node.data.text);
});
}
};

var clearFilter = function () {
var field = App.TriggerField1,
tree = App.TreePanelCategory;

field.setValue("");
tree.clearFilter(true);
tree.getView().focus();
};

var showMenu = function (view, node, item, index, e) {
var menu = App.TreeContextMenu;
debugger;

this.menuNode = node;
menu.nodeName = node.get("text");
view.getSelectionModel().select(node);

menu.showAt([e.getXY()[0], e.getXY()[1] + 10]);
e.stopEvent();
};
</script>

<ext:Menu ID="TreeContextMenu" runat="server">
<Items>
<ext:Label ID="NodeName" runat="server" />
<ext:MenuSeparator />
<ext:MenuItem ID="MenuItemEdit" runat="server" Text="Editar" Icon="Pencil">
<Listeners>
<Click Handler="#{TreePanelCategory}.editingPlugin.startEdit(#{Tre ePanelCategory}.menuNode, 0);" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="MenuItemRemove" runat="server" Text="Remover" Icon="Delete">
<Listeners>
<Click Handler="#{TreePanelCategory}.removeNode(#{TreePanelCategor y}.menuNode);" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="MenuItemAppendChild" runat="server" Text="Adicionar categoria filha"
Icon="Add">
<Listeners>
<Click Handler="#{TreePanelCategory}.appendChild(#{TreePanelCatego ry}.menuNode, 'New');" />
</Listeners>
</ext:MenuItem>
<ext:MenuItem ID="MenuItemInsertBegore" runat="server" Text="Inserir antes desta categoria"
Icon="ArrowRight">
<Listeners>
<Click Handler="#{TreePanelCategory}.insertBefore(#{TreePanelCateg ory}.menuNode, 'New');" />
</Listeners>
</ext:MenuItem>
</Items>
<Listeners>
<Show Handler="#{NodeName}.setText(this.nodeName);" />
</Listeners>
</ext:Menu>
<ext:TreePanel ID="TreePanelCategory" runat="server" Animate="true" Mode="Remote"
RootVisible="false" ContainerScroll="true" OnRemoteEdit="RemoteEdit" OnRemoteRemove="RemoteRemove"
OnRemoteAppend="RemoteAppend" OnRemoteMove="RemoteMove" ContextMenuID="TreeContextMenu">
<%--<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:ToolbarTextItem ID="ToolbarTextItemFilter" runat="server" Cls="userName" Text="Filtrar categorias:" />
<ext:ToolbarSpacer />
<ext:TriggerField ID="TriggerField1" Width="300" runat="server" EnableKeyEvents="true">
<Triggers>
<ext:FieldTrigger Icon="Clear" />
</Triggers>
<Listeners>
<KeyUp Fn="filterTree" Buffer="250" />
<TriggerClick Handler="clearFilter();" />
</Listeners>
</ext:TriggerField>
</Items>
</ext:Toolbar>
</TopBar>--%>
<ColumnModel>
<Columns>
<ext:TreeColumn ID="TreeColumn1" runat="server" DataIndex="text" Text="Text" Flex="1">
<Editor>
<ext:TextField ID="TextField1" runat="server" />
</Editor>
</ext:TreeColumn>
</Columns>
</ColumnModel>
<SelectionSubmitConfig Encode="true" />
<Listeners>
<ItemContextMenu Fn="showMenu" StopEvent="true" />
</Listeners>
<View>
<ext:TreeView ID="TreeView1" runat="server">
<Plugins>
<ext:TreeViewDragDrop ID="TreeViewDragDrop1" runat="server" AllowLeafDrop="true" />
</Plugins>
</ext:TreeView>
</View>
<Plugins>
<ext:CellEditing ID="CellEditing1" runat="server" />
</Plugins>
</ext:TreePanel>


Any suggestion?

Thanks

Daniil
Jun 13, 2012, 12:20 PM
Hi,

MasterPage and UserControl implements the INamingContainer interfaces. It causes that client id of the controls is not just "App" + server ID.

You should use the #{} syntax for all controls. For example, you should use

var tree = #{TreePanelCategory}
instead of

var tree = App.TreePanelCategory

To get #{} working you should wrap the script in an XScript control.

Example

<ext:XScript>
<script type="text/javascript">

</script>
</ext:XScript>

stoque
Jun 13, 2012, 2:01 PM
Hi Daniil,

Thanks for your help.

You can close this thread.

Just a note.

I received an exception: Control with type 'Ext.Net.XScript' cannot be handled by layout

After I wrap the Xscript in an Container worked.



<ext:Container ID="ContainerXScript" runat="server">
<Content>
<ext:XScript runat="server">
<script type="text/javascript">

</script>
</ext:XScript>
</Content>
</ext:Container>

michaeld
Jun 22, 2012, 7:37 AM
Hi Daniil,

Just a note.

I received an exception: Control with type 'Ext.Net.XScript' cannot be handled by layout

After I wrap the Xscript in an Container worked.



I got this same error after installing rc1. Is this a new requirement to wrap all scripts localized to user controls in ext:XScript? That seems expensive if there's nothing to actually parse.

Daniil
Jun 22, 2012, 9:08 AM
Hi,

No, there is no such requirement. If you would provide a sample to reproduce, we could clarify the situation.

I think it would be best to start a new forum thread, if you feel the threads are related, please cross link between the two.

michaeld
Jun 30, 2012, 9:27 AM
http://forums.ext.net/showthread.php?19829-2-0-rc1-Control-with-type-Ext-Net-XScript-cannot-be-handled-by-layout&p=85453#post85453