[CLOSED] Tree Panel not work for me in usercontrol.

[stoque]

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:
https://examples2.ext.net/#/TreePane...d/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(#{TreePanelCategory}.menuNode, 0);" />
            </Listeners>
        </ext:MenuItem>
        <ext:MenuItem ID="MenuItemRemove" runat="server" Text="Remover" Icon="Delete">
            <Listeners>
                <Click Handler="#{TreePanelCategory}.removeNode(#{TreePanelCategory}.menuNode);" />
            </Listeners>
        </ext:MenuItem>
        <ext:MenuItem ID="MenuItemAppendChild" runat="server" Text="Adicionar categoria filha"
            Icon="Add">
            <Listeners>
                <Click Handler="#{TreePanelCategory}.appendChild(#{TreePanelCategory}.menuNode, 'New');" />
            </Listeners>
        </ext:MenuItem>
        <ext:MenuItem ID="MenuItemInsertBegore" runat="server" Text="Inserir antes desta categoria"
            Icon="ArrowRight">
            <Listeners>
                <Click Handler="#{TreePanelCategory}.insertBefore(#{TreePanelCategory}.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]

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]

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]

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]

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]

http://forums.ext.net/showthread.php...5453#post85453