PDA

View Full Version : [CLOSED] Loading a UserControl into a Windows (Client Side)



sisa
Apr 20, 2013, 11:48 AM
Good Morning all

I need to load a UserControl (ascx) into a Window.
I tried to use the Example (http://examples2.ext.net/#/Loaders/Component/Direct_Method/)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.ShowTemplateNami ngWindow,
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
Apr 22, 2013, 4:41 AM
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/introduction-to-ext-net-events/

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

sisa
Apr 22, 2013, 8:38 AM
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.ShowTe mplateNamingWindow(),
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
Apr 22, 2013, 10:49 AM
Please try to replace:

directmethod: App.direct.ContentPanel_ucDeclarationDetail.ShowTe mplateNamingWindow(),

with

directMethod: App.direct.ContentPanel_ucDeclarationDetail.ShowTe mplateNamingWindow,


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.