[CLOSED] Loading a UserControl into a Windows (Client Side)

[sisa]

Good Morning all

I need to load a UserControl (ascx) into a Window.
I tried to use the Example on your Page - but I had no success :-)
Here's what I did

The Client Side call

function saveTemplate() {

    Ext.create('Ext.window.Window', {
        id: 'WinControlNaming',
        title: 'Template Name',
        height: 200,
        width: 350,
        layout: 'fit',
        setLoading: true,

        loader: {
            loadMask: true,
            autoload: false,
            //directmethod: App.direct.ContentMaster_ucDetail.ShowTemplateNamingWindow,
            mode: 'component',
            on: ({
                load: 'loadMask=false'
            })
        }
    }).show();
}

My Direct Method

        <DirectMethod()>
        Public Shared Function ShowTemplateNamingWindow() As String
            Return ComponentLoader.ToConfig("~/View/Import/userControls/Declaration/TemplateNaming.ascx")
        End Function

The Control

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="TemplateNaming.ascx.vb" Inherits="CUST.Import.View.TemplateNaming" %>

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

<ext:Container ID="ContainerTemplateNaming" runat="server" Layout="BorderLayout" Border="false" Padding="4">
    <Items>
        <ext:TextField runat="server" ID="txtTemplateName" FieldLabel="Name" AnchorHorizontal="80%" />
        <ext:TextArea runat="server" ID="txtTemplateDescription" FieldLabel="Description" AnchorHorizontal="80%" />
        <ext:FieldSet runat="server">
            <Items>

                <ext:Button runat="server" ID="cmdCancel" Text="cancel">
                    <Listeners>
                        <Click Fn="#{WinControlNaming}.close();" />
                    </Listeners>
                </ext:Button>

                <ext:Button runat="server" ID="cmdSave" Text="save">
                    <Listeners>
                        <Click Fn="" Single="true" />
                    </Listeners>
                </ext:Button>

            </Items>
        </ext:FieldSet>
    </Items>
</ext:Container>

And thats the Result :

JavaScript runtime error: Unable to get property 'ShowTemplateNamingWindow' of undefined or null reference

[Daniil]

Hello @sisa,

JavaScript runtime error: Unable to get property 'ShowTemplateNamingWindow' of undefined or null reference

It means that this is undefined

 App.direct.ContentMaster_ucDetail

Please ensure you are referring to a DirectMethod correctly.

Some other issues.

1. Replace

mode: 'component'

with

renderer: 'component'

2. Replace

loadMask: true

with

loadMask: {
    showMask: true  
}

3. "l" must be "L" here.

autoload: false

I.e. "autoLoad". But I don't think you should turn auto-loading off.

4. This is incorrect in the user control.

<Click Fn="#{WinControlNaming}.close();" />

You should use "Handler" instead of "Fn". The difference is explained here.
http://www.ext.net/2012/12/19/introd...xt-net-events/

5. Remove Layout="BorderLayout" of the Container with the user control. According to its Items you should, probably, use an AnchorLayout.

[sisa]

Ok so far ...
But now, here's the next error (appears in the ext.net library) :

        urlAppend : function(url, string) {
            if (!Ext.isEmpty(string)) {
                return url + (url.indexOf('?') === -1 ? '?' : '&') + string;
            }

            return url;
        },

Thats my cal

function saveDeclarationTemplate() {

    Ext.create('Ext.window.Window', {
        id: 'WinControlNaming',
        title: 'Template Name',
        height: 200,
        width: 350,
        layout: 'fit',
        setLoading: true,

        loader: {
            loadMask: {
                showMask: true 
            },
            autoLoad: true,
            directmethod: App.direct.ContentPanel_ucDeclarationDetail.ShowTemplateNamingWindow(),
            renderer: 'component',
            on: ({
                load: 'loadMask=false'
            })
        }
    }).show();
}

The Sencha API Ref is confusing for me :-)
The Url property is marked as required. In the Comment 'url is required or an error will result' which has been marked as 'Fixed' in version 4.1.3 ?!

[Daniil]

Please try to replace:

directmethod: App.direct.ContentPanel_ucDeclarationDetail.ShowTemplateNamingWindow(),

with

directMethod: App.direct.ContentPanel_ucDeclarationDetail.ShowTemplateNamingWindow,

The Sencha API Ref is confusing for me :-)

You can generate the required in markup, run it, then look at the Page Sources. There you will find a required JavaScript script.