PDA

View Full Version : [CLOSED] 0x800a139e - JavaScript runtime error: Ext.JSON.decode() while Loading a ASCX in Component Loader



Peter.Treier
May 17, 2013, 1:32 PM
Hi all

I need to load a user Control into a Ext Window. I proceed like in your example (http://examples2.ext.net/#/Loaders/Component/Direct_Method)

The Error : 0x800a139e - JavaScript runtime error: Ext.JSON.decode(): You're trying to decode an invalid JSON String:

The User Control :


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

<style type="text/css">
table.tooltiptable
{
font: 11px Verdana, Arial, Helvetica, sans-serif, bold;
color: #686868;
background: #F8F8F8;
height: 150px;
width: 250px;
}

td.tooltipNamecell
{
font: 11px Verdana, Arial, Helvetica, sans-serif, bold;
color: black;
}
</style>

<script type="text/javascript">
var isDashboard;
var submitValue = function (grid, hiddenFormat, format) {
hiddenFormat.setValue(format);
grid.submitData(false);
};

//function showAddress(record, value) {
// var url = undefined;
// var rec = record;
// var tabname = "";

// if (value == 'cmdShowProvider') {
// url = "_ContactAndAddress/ContactPage.aspx?Usage=External&ContactId=" + record.data.ProviderId;
// tabname = extCon
// }
// if (value == 'cmdShowRequestor') {
// url = "_ContactAndAddress/ContactPage.aspx?Usage=Internal&ContactId=" + record.data.RequestorId;
// tabname = intCon
// }

// if (url != undefined) {
// SISA.Architecture.Center.ViewPlugin.openTab('Alway sNew', url, tabname, 'eDec-iApp');
// }
//}


var prepareSoonUsedUpState = function (grid, command, record, row) {
{
if (command.command == 'cmdSoonUsedUpState') {
command.hidden = !record.data.SoonUsedUp;
}
}
}



function GetProviderText(record) {
var text = '<table class="tooltiptable">' +
'<tr><td class="tooltipNamecell">' + tooltipName + ': </td><td>' + record.data.ProviderName + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipFirstName + ': </td><td>' + record.data.ProviderFirstName + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipTIN + ': </td><td>' + record.data.ProviderTIN + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipDeclarantNam + ': </td><td>' + record.data.ProviderDeclarantName + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipDeclarantNumber + ': </td><td>' + record.data.ProviderDeclarantNumber + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltiplName2 + ': </td><td>' + record.data.ProviderName2 + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltiplShortName + ': </td><td>' + record.data.ProviderShortName + '</td></tr>' +
'</table>';
return text;
}

function GetRequestorText(record) {
var text = '<table class="tooltiptable">' +
'<tr><td class="tooltipNamecell">' + tooltipName + ': </td><td>' + record.data.RequestorName + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipFirstName + ': </td><td>' + record.data.RequestorFirstName + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipTIN + ': </td><td>' + record.data.RequestorTIN + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipDeclarantNam + ': </td><td>' + record.data.RequestorDeclarantName + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipDeclarantNumber + ': </td><td>' + record.data.RequestorDeclarantNumber + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltiplName2 + ': </td><td>' + record.data.RequestorName2 + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltiplShortName + ': </td><td>' + record.data.RequestorShortName + '</td></tr>' +
'</table>';
return text;
}

var showPermitGridToolTip = function (toolTip, grid) {

var view = grid.getView(),
store = grid.getStore(),
record = view.getRecord(view.findItemByChild(toolTip.trigge rElement)),
column = view.getHeaderByCell(toolTip.triggerElement),
fieldName = column.dataIndex;
var data = null;

if (fieldName == "Provider") {
data = GetProviderText(record);
}
else if (fieldName == "Requestor") {
data = GetRequestorText(record);
}

if (data != null) {
toolTip.update(data);
}
else {
}
};

var onBeforeShow = function (toolTip, grid) {
var view = grid.getView(),
store = grid.getStore(),
record = view.getRecord(view.findItemByChild(toolTip.trigge rElement)),
column = view.getHeaderByCell(toolTip.triggerElement),
fieldName = column.dataIndex;

if (fieldName == "Provider") {
return true;
}
else if (fieldName == "Requestor") {
return true;
}
else {
return false;
}
};

</script>



<ext:Container ID="Container1" runat="server" Layout="FitLayout">
<Items>
<ext:Hidden ID="txtSelectedItemId" runat="server"></ext:Hidden>
<ext:Hidden ID="txtIsSingleUsePermit" runat="server"></ext:Hidden>
<ext:Hidden ID="txtAmount" runat="server"></ext:Hidden>
<ext:Hidden ID="txtAmountUseCount" runat="server"></ext:Hidden>
<ext:Hidden ID="txtMeasurementTypeValue" runat="server"></ext:Hidden>
<ext:Hidden ID="txtUseCount" runat="server"></ext:Hidden>

<ext:GridPanel ID="GridPanelPermit" runat="server" Title="TEST" Header="true" Layout="Fitlayout" MaskDisabled="True" StripeRows="True" TrackMouseOver="True" Icon="Lock" TitleAlign="Left">

<Bin>
<ext:ToolTip ID="RowTip" runat="server" Target="={#{GridPanelPermit}.getView().el}"
MaxWidth="1000" MaxHeight="1000" Delegate=".x-grid-cell" TrackMouse="true" ShowDelay="1"
Anchor="bottom" NoCache="true" Icon="PageWhite">
<Listeners>
<Show Handler="showPermitGridToolTip(this, #{GridPanelPermit});" />
<BeforeShow Handler="return onBeforeShow(this ,#{GridPanelPermit});" />
</Listeners>
</ext:ToolTip>
</Bin>

<ColumnModel>
<Columns>
<ext:ImageCommandColumn ID="colSoonUsedUp" Width="30" DataIndex="SoonUsedUp" runat="server" ToolTip="TEST">
<Commands>
<ext:ImageCommand Icon="CogDelete" CommandName="cmdSoonUsedUpState">
<ToolTip Text="TEST" />
</ext:ImageCommand>
</Commands>
<PrepareCommand Fn="prepareSoonUsedUpState" />
</ext:ImageCommandColumn>
<ext:DateColumn ID="colCreationDate" DataIndex="CreationDate" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server">
</ext:DateColumn>
<ext:CheckColumn ID="colIsSingleUse" DataIndex="IsSingleUse" Text="TEST" Width="30" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colAmount" DataIndex="Amount" Text="TEST" Width="60" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colAmontUseCount" DataIndex="AmountUseCount" Text="TEST" Width="60" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colUseCount" DataIndex="UseCount" Text="TEST" Width="60" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colMeasurementTypeValue" DataIndex="MeasurementTypeValue" Text="TEST" Width="30" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colNumber" DataIndex="Number" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colOriginInformation" DataIndex="OriginInformation" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" Flex="1" />
<ext:Column ID="colPermitAuthorityValue" DataIndex="PermitAuthorityValue" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colPermitTypeValue" DataIndex="PermitTypeValue" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:ImageCommandColumn Width="25" DataIndex="Provider" runat="server">
<Commands>
<ext:ImageCommand Icon="UserEarth" CommandName="cmdShowProvider">
</ext:ImageCommand>
</Commands>
<DirectEvents>
<Command OnEvent="cmdShowExternalProvider">
<ExtraParams>
<ext:Parameter Name="ExternalProviderId" Value=" record.data.ProviderId" Mode="Raw" />
</ExtraParams>
</Command>
</DirectEvents>
</ext:ImageCommandColumn>
<ext:Column ID="colProviderName" DataIndex="ProviderName" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server">
<Renderer Fn="function (v, p, record, rowIndex) {return record.data.ProviderName + ', ' + record.data.ProviderFirstName}" />
</ext:Column>
<ext:ImageCommandColumn Width="25" DataIndex="Requestor" runat="server">
<Commands>
<ext:ImageCommand Icon="User" CommandName="cmdShowRequestor" runat="server">
</ext:ImageCommand>
</Commands>
<DirectEvents>
<Command OnEvent="cmdShowRequestor">
<ExtraParams>
<ext:Parameter Name="InternalRequestorId" Value=" record.data.RequestorId" Mode="Raw" />
</ExtraParams>
</Command>
</DirectEvents>
</ext:ImageCommandColumn>
<ext:Column ID="colRequestorName" DataIndex="RequestorName" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server">
<Renderer Fn="function (v, p, record, rowIndex) {return record.data.RequestorName + ', ' + record.data.RequestorFirstName}" />
</ext:Column>
<ext:Column ID="colStatusValue" DataIndex="StatusValue" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:DateColumn ID="colValideFrom" DataIndex="ValideFrom" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:DateColumn ID="colValideTo" DataIndex="ValideTo" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server">
</ext:DateColumn>
<ext:Column ID="colCreateUser" DataIndex="CreateUser" Text="TEST" Width="100" Editable="False" Hidden="true" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colUpdateUser" DataIndex="UpdateUser" Text="TEST"
Width="100" Editable="False" Hidden="true" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:DateColumn ID="colUpdateTime" DataIndex="UpdateTime" Text="TEST" Width="100" Hidden="true" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
</Columns>
</ColumnModel>

<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi">
<DirectEvents>
<Select OnEvent="GetPermitDetail">
<EventMask ShowMask="true" />
<ExtraParams>
<ext:Parameter Name="PermitId" Value="record.data.Id" Mode="Raw" />
<ext:Parameter Name="IsSingleUse" Value="record.data.IsSingleUse" Mode="Raw" />
<ext:Parameter Name="Amount" Value="record.data.Amount" Mode="Raw" />
<ext:Parameter Name="MeasurementTypeValue" Value="record.data.MeasurementTypeValue" Mode="Raw" />
<ext:Parameter Name="AmountUseCount" Value="record.data.AmountUseCount" Mode="Raw" />
<ext:Parameter Name="UseCount" Value="record.data.UseCount" Mode="Raw" />
</ExtraParams>
</Select>
</DirectEvents>
</ext:RowSelectionModel>
</SelectionModel>

<BottomBar>
<ext:PagingToolbar ID="PagingToolbarOrder" runat="server" PageSize="10"
DisplayInfo="true">
<Items>
<ext:Label ID="Label1" runat="server" Text="TEST" />
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
<ext:ComboBox ID="ComboBox1" runat="server" Width="80">
<Items>
<ext:ListItem Text="2" />
<ext:ListItem Text="4" />
<ext:ListItem Text="10" />
</Items>
<SelectedItems>
<ext:ListItem Value="10" />
</SelectedItems>

<Listeners>
<Select Handler="#{GridPanelPermit}.store.pageSize = parseInt(this.getValue()); " />
</Listeners>
</ext:ComboBox>
<ext:ToolbarSpacer ID="ToolbarSpacer3" runat="server" Width="10" />
<ext:DisplayField ID="QueryDisplayField" runat="server" Text="" FieldCls="x-toolbar-text "></ext:DisplayField>
</Items>
</ext:PagingToolbar>
</BottomBar>

</ext:GridPanel>


</Items>
</ext:Container>



The Loader :


<DirectMethod()>
Public Function GetPermitControl() As String
Dim url = "~/View/edec-iapp/userControls/Permit/PermitGrid.ascx"
Return ComponentLoader.ToConfig(url)
End Function

The JSON Returned :


[{id:"Container1",xtype:"container",items:[{id:"txtSelectedItemId",xtype:"hiddenfield"},{id:"txtIsSingleUsePermit",xtype:"hiddenfield"},{id:"txtAmount",xtype:"hiddenfield"},{id:"txtAmountUseCount",xtype:"hiddenfield"},{id:"txtMeasurementTypeValue",xtype:"hiddenfield"},{id:"txtUseCount",xtype:"hiddenfield"},{bin:[Ext.create("Ext.tip.ToolTip",{id:"RowTip",noCache:true,maxHeight:1000,maxWidth:1000,xtype:"tooltip",anchor:"bottom",iconCls:"#PageWhite",delegate:".x-grid-cell",showDelay:1,target:"App.GridPanelPermit.getView().el",trackMouse:true,listeners:{beforeshow:{fn:functio n(item){return onBeforeShow(this ,App.GridPanelPermit);}},show:{fn:function(item){s howPermitGridToolTip(this, App.GridPanelPermit);}}}})],id:"GridPanelPermit",maskDisabled:true,stripeRows:true,trackMouseOver: true,xtype:"grid",layout:"fit",bbar:{id:"PagingToolbarOrder",pageSize:10,xtype:"pagingtoolbar",items:[{id:"Label1",xtype:"netlabel",text:"PagerSize"},{id:"ToolbarSpacer1",width:10,xtype:"tbspacer"},{id:"ComboBox1",width:80,xtype:"combobox",selectedItems:[{value:"10"}],queryMode:"local",triggerAction:"all",store:[["2","2"],["4","4"],["10","10"]],listeners:{select:{fn:function(item,records){App. GridPanelPermit.store.pageSize = parseInt(this.getValue()); }}}},{id:"ToolbarSpacer3",width:10,xtype:"tbspacer"},{id:"QueryDisplayField",xtype:"displayfield",fieldCls:"x-toolbar-text "}],displayInfo:true},title:"Permit",titleAlign:"left",iconCls:"#Lock",columns:{items:[{id:"colSoonUsedUp",width:30,xtype:"imagecommandcolumn",dataIndex:"SoonUsedUp",tooltip:"Soon Used Up",commands:[{command:"cmdSoonUsedUpState",iconCls:"#CogDelete",tooltip:{text:"Soon Used Up"}}],prepareCommand:prepareSoonUsedUpState},{id:"colCreationDate",editable:false,width:100,xtype:"datecolumn",dataIndex:"CreationDate",groupable:false,sortable:false,text:"CreationDate",format:"d.m.Y"},{id:"colIsSingleUse",width:30,xtype:"checkcolumn",dataIndex:"IsSingleUse",groupable:false,sortable:false,text:"IsSingleUse"},{id:"colAmount",editable:false,width:60,dataIndex:"Amount",groupable:false,sortable:false,text:"Amount"},{id:"colAmontUseCount",editable:false,width:60,dataIndex:"AmountUseCount",groupable:false,sortable:false,text:"AmountUseCount"},{id:"colUseCount",editable:false,width:60,dataIndex:"UseCount",groupable:false,sortable:false,text:"Use Count"},{id:"colMeasurementTypeValue",editable:false,width:30,dataIndex:"MeasurementTypeValue",groupable:false,sortable:false,text:"MeasurementTypeValue"},{id:"colNumber",editable:false,width:100,dataIndex:"Number",groupable:false,sortable:false,text:"Number"},{id:"colOriginInformation",editable:false,width:100,flex:1,dataIndex:"OriginInformation",groupable:false,sortable:false,text:"Origin Information"},{id:"colPermitAuthorityValue",editable:false,width:100,dataIndex:"PermitAuthorityValue",groupable:false,sortable:false,text:"PermitAuthorityValue"},{id:"colPermitTypeValue",editable:false,width:100,dataIndex:"PermitTypeValue",groupable:false,sortable:false,text:"PermitTypeValue"},{width:25,xtype:"imagecommandcolumn",dataIndex:"Provider",commands:[{command:"cmdShowProvider",iconCls:"#UserEarth"}],directEvents:{command:{fn:function(item,command,r ecord,recordIndex,cellIndex){Ext.net.directRequest ({extraParams:{"ExternalProviderId": record.data.ProviderId},control:this,action:'Comma nd'});}}}},{id:"colProviderName",editable:false,width:100,dataIndex:"ProviderName",groupable:false,renderer:function (v, p, record, rowIndex) {return record.data.ProviderName + ', ' + record.data.ProviderFirstName},sortable:false,text :"ProviderName"},{width:25,xtype:"imagecommandcolumn",dataIndex:"Requestor",commands:[{command:"cmdShowRequestor",iconCls:"#User"}],directEvents:{command:{fn:function(item,command,r ecord,recordIndex,cellIndex){Ext.net.directRequest ({extraParams:{"InternalRequestorId": record.data.RequestorId},control:this,action:'Comm and'});}}}},{id:"colRequestorName",editable:false,width:100,dataIndex:"RequestorName",groupable:false,renderer:function (v, p, record, rowIndex) {return record.data.RequestorName + ', ' + record.data.RequestorFirstName},sortable:false,tex t:"RequestorName"},{id:"colStatusValue",editable:false,width:100,dataIndex:"StatusValue",groupable:false,sortable:false,text:"StatusValue"},{id:"colValideFrom",editable:false,width:100,xtype:"datecolumn",dataIndex:"ValideFrom",groupable:false,sortable:false,text:"Valid From",format:"d.m.Y"},{id:"colValideTo",editable:false,width:100,xtype:"datecolumn",dataIndex:"ValideTo",groupable:false,sortable:false,text:"Valid To",format:"d.m.Y"},{id:"colCreateUser",editable:false,hidden:true,width:100,dataIndex:"CreateUser",groupable:false,sortable:false,text:"CreateUser"},{id:"colUpdateUser",editable:false,hidden:true,width:100,dataIndex:"UpdateUser",groupable:false,sortable:false,text:"Update User"},{id:"colUpdateTime",hidden:true,width:100,xtype:"datecolumn",dataIndex:"UpdateTime",groupable:false,sortable:false,text:"UpdateTime",format:"d.m.Y"}]},selModel:window.App.RowSelectionModel1=Ext.creat e("Ext.selection.RowModel",{proxyId:"RowSelectionModel1",selType:"rowmodel",mode:"multi",directEvents:{select:{fn:function(item,record,ind ex){Ext.net.directRequest({extraParams:{"PermitId":record.data.Id,"IsSingleUse":record.data.IsSingleUse,"Amount":record.data.Amount,"MeasurementTypeValue":record.data.MeasurementTypeValue,"AmountUseCount":record.data.AmountUseCount,"UseCount":record.data.UseCount},eventMask:{showMask:true},c ontrol:this,action:'Select'});}}}})}],layout:"fit"}]

I tried to remove the Bin Stuff from the Control but the Error still occures, here's the JSON :


[{id:"Container1",xtype:"container",items:[{id:"txtSelectedItemId",xtype:"hiddenfield"},{id:"txtIsSingleUsePermit",xtype:"hiddenfield"},{id:"txtAmount",xtype:"hiddenfield"},{id:"txtAmountUseCount",xtype:"hiddenfield"},{id:"txtMeasurementTypeValue",xtype:"hiddenfield"},{id:"txtUseCount",xtype:"hiddenfield"},{id:"GridPanelPermit",maskDisabled:true,stripeRows:true,trackMouseOver: true,xtype:"grid",layout:"fit",bbar:{id:"PagingToolbarOrder",pageSize:10,xtype:"pagingtoolbar",items:[{id:"Label1",xtype:"netlabel",text:"PagerSize"},{id:"ToolbarSpacer1",width:10,xtype:"tbspacer"},{id:"ComboBox1",width:80,xtype:"combobox",selectedItems:[{value:"10"}],queryMode:"local",triggerAction:"all",store:[["2","2"],["4","4"],["10","10"]],listeners:{select:{fn:function(item,records){App. GridPanelPermit.store.pageSize = parseInt(this.getValue()); }}}},{id:"ToolbarSpacer3",width:10,xtype:"tbspacer"},{id:"QueryDisplayField",xtype:"displayfield",fieldCls:"x-toolbar-text "}],displayInfo:true},title:"Permit",titleAlign:"left",iconCls:"#Lock",columns:{items:[{id:"colSoonUsedUp",width:30,xtype:"imagecommandcolumn",dataIndex:"SoonUsedUp",tooltip:"Soon Used Up",commands:[{command:"cmdSoonUsedUpState",iconCls:"#CogDelete",tooltip:{text:"Soon Used Up"}}],prepareCommand:prepareSoonUsedUpState},{id:"colCreationDate",editable:false,width:100,xtype:"datecolumn",dataIndex:"CreationDate",groupable:false,sortable:false,text:"CreationDate",format:"d.m.Y"},{id:"colIsSingleUse",width:30,xtype:"checkcolumn",dataIndex:"IsSingleUse",groupable:false,sortable:false,text:"IsSingleUse"},{id:"colAmount",editable:false,width:60,dataIndex:"Amount",groupable:false,sortable:false,text:"Amount"},{id:"colAmontUseCount",editable:false,width:60,dataIndex:"AmountUseCount",groupable:false,sortable:false,text:"AmountUseCount"},{id:"colUseCount",editable:false,width:60,dataIndex:"UseCount",groupable:false,sortable:false,text:"Use Count"},{id:"colMeasurementTypeValue",editable:false,width:30,dataIndex:"MeasurementTypeValue",groupable:false,sortable:false,text:"MeasurementTypeValue"},{id:"colNumber",editable:false,width:100,dataIndex:"Number",groupable:false,sortable:false,text:"Number"},{id:"colOriginInformation",editable:false,width:100,flex:1,dataIndex:"OriginInformation",groupable:false,sortable:false,text:"Origin Information"},{id:"colPermitAuthorityValue",editable:false,width:100,dataIndex:"PermitAuthorityValue",groupable:false,sortable:false,text:"PermitAuthorityValue"},{id:"colPermitTypeValue",editable:false,width:100,dataIndex:"PermitTypeValue",groupable:false,sortable:false,text:"PermitTypeValue"},{width:25,xtype:"imagecommandcolumn",dataIndex:"Provider",commands:[{command:"cmdShowProvider",iconCls:"#UserEarth"}],directEvents:{command:{fn:function(item,command,r ecord,recordIndex,cellIndex){Ext.net.directRequest ({extraParams:{"ExternalProviderId": record.data.ProviderId},control:this,action:'Comma nd'});}}}},{id:"colProviderName",editable:false,width:100,dataIndex:"ProviderName",groupable:false,renderer:function (v, p, record, rowIndex) {return record.data.ProviderName + ', ' + record.data.ProviderFirstName},sortable:false,text :"ProviderName"},{width:25,xtype:"imagecommandcolumn",dataIndex:"Requestor",commands:[{command:"cmdShowRequestor",iconCls:"#User"}],directEvents:{command:{fn:function(item,command,r ecord,recordIndex,cellIndex){Ext.net.directRequest ({extraParams:{"InternalRequestorId": record.data.RequestorId},control:this,action:'Comm and'});}}}},{id:"colRequestorName",editable:false,width:100,dataIndex:"RequestorName",groupable:false,renderer:function (v, p, record, rowIndex) {return record.data.RequestorName + ', ' + record.data.RequestorFirstName},sortable:false,tex t:"RequestorName"},{id:"colStatusValue",editable:false,width:100,dataIndex:"StatusValue",groupable:false,sortable:false,text:"StatusValue"},{id:"colValideFrom",editable:false,width:100,xtype:"datecolumn",dataIndex:"ValideFrom",groupable:false,sortable:false,text:"Valid From",format:"d.m.Y"},{id:"colValideTo",editable:false,width:100,xtype:"datecolumn",dataIndex:"ValideTo",groupable:false,sortable:false,text:"Valid To",format:"d.m.Y"},{id:"colCreateUser",editable:false,hidden:true,width:100,dataIndex:"CreateUser",groupable:false,sortable:false,text:"CreateUser"},{id:"colUpdateUser",editable:false,hidden:true,width:100,dataIndex:"UpdateUser",groupable:false,sortable:false,text:"Update User"},{id:"colUpdateTime",hidden:true,width:100,xtype:"datecolumn",dataIndex:"UpdateTime",groupable:false,sortable:false,text:"UpdateTime",format:"d.m.Y"}]},selModel:window.App.RowSelectionModel1=Ext.creat e("Ext.selection.RowModel",{proxyId:"RowSelectionModel1",selType:"rowmodel",mode:"multi",directEvents:{select:{fn:function(item,record,ind ex){Ext.net.directRequest({extraParams:{"PermitId":record.data.Id,"IsSingleUse":record.data.IsSingleUse,"Amount":record.data.Amount,"MeasurementTypeValue":record.data.MeasurementTypeValue,"AmountUseCount":record.data.AmountUseCount,"UseCount":record.data.UseCount},eventMask:{showMask:true},c ontrol:this,action:'Select'});}}}})}],layout:"fit"}]

That's the Window


<ext:Window runat="server" ID="winPermit" Hidden="True" Width="1080" Height="550" PageX="100" PageY="100" Layout="fitlayout">
<Items>
<ext:Panel runat="server" Border="false" ID="permitUserControl">
<Loader ID="Loader1"
runat="server"
AutoLoad="true"
DirectMethod="#{DirectMethods}.GetPermitControl"
Mode="Component">
<LoadMask ShowMask="true" />
</Loader>
<Buttons>
<ext:Button runat="server" ID="Button4" Text="Close">
<Listeners>
<Click Handler="winContactHide();" />
</Listeners>
</ext:Button>

<ext:Button runat="server" ID="Button5" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="setPermit()" />
</Listeners>
</ext:Button>
</Buttons>

</ext:Panel>
</Items>
</ext:Window>

Any Idea whats wrong here ?

Peter.Treier
May 17, 2013, 2:08 PM
I was able to fix this error by removing all CSS and Script content on the User Control.
Is this what you suggest ?

Peter



Hi all

I need to load a user Control into a Ext Window. I proceed like in your example (http://examples2.ext.net/#/Loaders/Component/Direct_Method)

The Error : 0x800a139e - JavaScript runtime error: Ext.JSON.decode(): You're trying to decode an invalid JSON String:

The User Control :


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

<style type="text/css">
table.tooltiptable
{
font: 11px Verdana, Arial, Helvetica, sans-serif, bold;
color: #686868;
background: #F8F8F8;
height: 150px;
width: 250px;
}

td.tooltipNamecell
{
font: 11px Verdana, Arial, Helvetica, sans-serif, bold;
color: black;
}
</style>

<script type="text/javascript">
var isDashboard;
var submitValue = function (grid, hiddenFormat, format) {
hiddenFormat.setValue(format);
grid.submitData(false);
};

//function showAddress(record, value) {
// var url = undefined;
// var rec = record;
// var tabname = "";

// if (value == 'cmdShowProvider') {
// url = "_ContactAndAddress/ContactPage.aspx?Usage=External&ContactId=" + record.data.ProviderId;
// tabname = extCon
// }
// if (value == 'cmdShowRequestor') {
// url = "_ContactAndAddress/ContactPage.aspx?Usage=Internal&ContactId=" + record.data.RequestorId;
// tabname = intCon
// }

// if (url != undefined) {
// SISA.Architecture.Center.ViewPlugin.openTab('Alway sNew', url, tabname, 'eDec-iApp');
// }
//}


var prepareSoonUsedUpState = function (grid, command, record, row) {
{
if (command.command == 'cmdSoonUsedUpState') {
command.hidden = !record.data.SoonUsedUp;
}
}
}



function GetProviderText(record) {
var text = '<table class="tooltiptable">' +
'<tr><td class="tooltipNamecell">' + tooltipName + ': </td><td>' + record.data.ProviderName + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipFirstName + ': </td><td>' + record.data.ProviderFirstName + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipTIN + ': </td><td>' + record.data.ProviderTIN + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipDeclarantNam + ': </td><td>' + record.data.ProviderDeclarantName + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipDeclarantNumber + ': </td><td>' + record.data.ProviderDeclarantNumber + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltiplName2 + ': </td><td>' + record.data.ProviderName2 + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltiplShortName + ': </td><td>' + record.data.ProviderShortName + '</td></tr>' +
'</table>';
return text;
}

function GetRequestorText(record) {
var text = '<table class="tooltiptable">' +
'<tr><td class="tooltipNamecell">' + tooltipName + ': </td><td>' + record.data.RequestorName + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipFirstName + ': </td><td>' + record.data.RequestorFirstName + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipTIN + ': </td><td>' + record.data.RequestorTIN + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipDeclarantNam + ': </td><td>' + record.data.RequestorDeclarantName + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltipDeclarantNumber + ': </td><td>' + record.data.RequestorDeclarantNumber + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltiplName2 + ': </td><td>' + record.data.RequestorName2 + '</td></tr>' +
'<tr><td class="tooltipNamecell">' + tooltiplShortName + ': </td><td>' + record.data.RequestorShortName + '</td></tr>' +
'</table>';
return text;
}

var showPermitGridToolTip = function (toolTip, grid) {

var view = grid.getView(),
store = grid.getStore(),
record = view.getRecord(view.findItemByChild(toolTip.trigge rElement)),
column = view.getHeaderByCell(toolTip.triggerElement),
fieldName = column.dataIndex;
var data = null;

if (fieldName == "Provider") {
data = GetProviderText(record);
}
else if (fieldName == "Requestor") {
data = GetRequestorText(record);
}

if (data != null) {
toolTip.update(data);
}
else {
}
};

var onBeforeShow = function (toolTip, grid) {
var view = grid.getView(),
store = grid.getStore(),
record = view.getRecord(view.findItemByChild(toolTip.trigge rElement)),
column = view.getHeaderByCell(toolTip.triggerElement),
fieldName = column.dataIndex;

if (fieldName == "Provider") {
return true;
}
else if (fieldName == "Requestor") {
return true;
}
else {
return false;
}
};

</script>



<ext:Container ID="Container1" runat="server" Layout="FitLayout">
<Items>
<ext:Hidden ID="txtSelectedItemId" runat="server"></ext:Hidden>
<ext:Hidden ID="txtIsSingleUsePermit" runat="server"></ext:Hidden>
<ext:Hidden ID="txtAmount" runat="server"></ext:Hidden>
<ext:Hidden ID="txtAmountUseCount" runat="server"></ext:Hidden>
<ext:Hidden ID="txtMeasurementTypeValue" runat="server"></ext:Hidden>
<ext:Hidden ID="txtUseCount" runat="server"></ext:Hidden>

<ext:GridPanel ID="GridPanelPermit" runat="server" Title="TEST" Header="true" Layout="Fitlayout" MaskDisabled="True" StripeRows="True" TrackMouseOver="True" Icon="Lock" TitleAlign="Left">

<Bin>
<ext:ToolTip ID="RowTip" runat="server" Target="={#{GridPanelPermit}.getView().el}"
MaxWidth="1000" MaxHeight="1000" Delegate=".x-grid-cell" TrackMouse="true" ShowDelay="1"
Anchor="bottom" NoCache="true" Icon="PageWhite">
<Listeners>
<Show Handler="showPermitGridToolTip(this, #{GridPanelPermit});" />
<BeforeShow Handler="return onBeforeShow(this ,#{GridPanelPermit});" />
</Listeners>
</ext:ToolTip>
</Bin>

<ColumnModel>
<Columns>
<ext:ImageCommandColumn ID="colSoonUsedUp" Width="30" DataIndex="SoonUsedUp" runat="server" ToolTip="TEST">
<Commands>
<ext:ImageCommand Icon="CogDelete" CommandName="cmdSoonUsedUpState">
<ToolTip Text="TEST" />
</ext:ImageCommand>
</Commands>
<PrepareCommand Fn="prepareSoonUsedUpState" />
</ext:ImageCommandColumn>
<ext:DateColumn ID="colCreationDate" DataIndex="CreationDate" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server">
</ext:DateColumn>
<ext:CheckColumn ID="colIsSingleUse" DataIndex="IsSingleUse" Text="TEST" Width="30" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colAmount" DataIndex="Amount" Text="TEST" Width="60" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colAmontUseCount" DataIndex="AmountUseCount" Text="TEST" Width="60" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colUseCount" DataIndex="UseCount" Text="TEST" Width="60" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colMeasurementTypeValue" DataIndex="MeasurementTypeValue" Text="TEST" Width="30" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colNumber" DataIndex="Number" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colOriginInformation" DataIndex="OriginInformation" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" Flex="1" />
<ext:Column ID="colPermitAuthorityValue" DataIndex="PermitAuthorityValue" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colPermitTypeValue" DataIndex="PermitTypeValue" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:ImageCommandColumn Width="25" DataIndex="Provider" runat="server">
<Commands>
<ext:ImageCommand Icon="UserEarth" CommandName="cmdShowProvider">
</ext:ImageCommand>
</Commands>
<DirectEvents>
<Command OnEvent="cmdShowExternalProvider">
<ExtraParams>
<ext:Parameter Name="ExternalProviderId" Value=" record.data.ProviderId" Mode="Raw" />
</ExtraParams>
</Command>
</DirectEvents>
</ext:ImageCommandColumn>
<ext:Column ID="colProviderName" DataIndex="ProviderName" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server">
<Renderer Fn="function (v, p, record, rowIndex) {return record.data.ProviderName + ', ' + record.data.ProviderFirstName}" />
</ext:Column>
<ext:ImageCommandColumn Width="25" DataIndex="Requestor" runat="server">
<Commands>
<ext:ImageCommand Icon="User" CommandName="cmdShowRequestor" runat="server">
</ext:ImageCommand>
</Commands>
<DirectEvents>
<Command OnEvent="cmdShowRequestor">
<ExtraParams>
<ext:Parameter Name="InternalRequestorId" Value=" record.data.RequestorId" Mode="Raw" />
</ExtraParams>
</Command>
</DirectEvents>
</ext:ImageCommandColumn>
<ext:Column ID="colRequestorName" DataIndex="RequestorName" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server">
<Renderer Fn="function (v, p, record, rowIndex) {return record.data.RequestorName + ', ' + record.data.RequestorFirstName}" />
</ext:Column>
<ext:Column ID="colStatusValue" DataIndex="StatusValue" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:DateColumn ID="colValideFrom" DataIndex="ValideFrom" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:DateColumn ID="colValideTo" DataIndex="ValideTo" Text="TEST" Width="100" Editable="False" Hidden="False" Groupable="False" Sortable="False" MenuDisabled="False" runat="server">
</ext:DateColumn>
<ext:Column ID="colCreateUser" DataIndex="CreateUser" Text="TEST" Width="100" Editable="False" Hidden="true" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:Column ID="colUpdateUser" DataIndex="UpdateUser" Text="TEST"
Width="100" Editable="False" Hidden="true" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
<ext:DateColumn ID="colUpdateTime" DataIndex="UpdateTime" Text="TEST" Width="100" Hidden="true" Groupable="False" Sortable="False" MenuDisabled="False" runat="server" />
</Columns>
</ColumnModel>

<SelectionModel>
<ext:RowSelectionModel ID="RowSelectionModel1" runat="server" Mode="Multi">
<DirectEvents>
<Select OnEvent="GetPermitDetail">
<EventMask ShowMask="true" />
<ExtraParams>
<ext:Parameter Name="PermitId" Value="record.data.Id" Mode="Raw" />
<ext:Parameter Name="IsSingleUse" Value="record.data.IsSingleUse" Mode="Raw" />
<ext:Parameter Name="Amount" Value="record.data.Amount" Mode="Raw" />
<ext:Parameter Name="MeasurementTypeValue" Value="record.data.MeasurementTypeValue" Mode="Raw" />
<ext:Parameter Name="AmountUseCount" Value="record.data.AmountUseCount" Mode="Raw" />
<ext:Parameter Name="UseCount" Value="record.data.UseCount" Mode="Raw" />
</ExtraParams>
</Select>
</DirectEvents>
</ext:RowSelectionModel>
</SelectionModel>

<BottomBar>
<ext:PagingToolbar ID="PagingToolbarOrder" runat="server" PageSize="10"
DisplayInfo="true">
<Items>
<ext:Label ID="Label1" runat="server" Text="TEST" />
<ext:ToolbarSpacer ID="ToolbarSpacer1" runat="server" Width="10" />
<ext:ComboBox ID="ComboBox1" runat="server" Width="80">
<Items>
<ext:ListItem Text="2" />
<ext:ListItem Text="4" />
<ext:ListItem Text="10" />
</Items>
<SelectedItems>
<ext:ListItem Value="10" />
</SelectedItems>

<Listeners>
<Select Handler="#{GridPanelPermit}.store.pageSize = parseInt(this.getValue()); " />
</Listeners>
</ext:ComboBox>
<ext:ToolbarSpacer ID="ToolbarSpacer3" runat="server" Width="10" />
<ext:DisplayField ID="QueryDisplayField" runat="server" Text="" FieldCls="x-toolbar-text "></ext:DisplayField>
</Items>
</ext:PagingToolbar>
</BottomBar>

</ext:GridPanel>


</Items>
</ext:Container>



The Loader :


<DirectMethod()>
Public Function GetPermitControl() As String
Dim url = "~/View/edec-iapp/userControls/Permit/PermitGrid.ascx"
Return ComponentLoader.ToConfig(url)
End Function

The JSON Returned :


[{id:"Container1",xtype:"container",items:[{id:"txtSelectedItemId",xtype:"hiddenfield"},{id:"txtIsSingleUsePermit",xtype:"hiddenfield"},{id:"txtAmount",xtype:"hiddenfield"},{id:"txtAmountUseCount",xtype:"hiddenfield"},{id:"txtMeasurementTypeValue",xtype:"hiddenfield"},{id:"txtUseCount",xtype:"hiddenfield"},{bin:[Ext.create("Ext.tip.ToolTip",{id:"RowTip",noCache:true,maxHeight:1000,maxWidth:1000,xtype:"tooltip",anchor:"bottom",iconCls:"#PageWhite",delegate:".x-grid-cell",showDelay:1,target:"App.GridPanelPermit.getView().el",trackMouse:true,listeners:{beforeshow:{fn:functio n(item){return onBeforeShow(this ,App.GridPanelPermit);}},show:{fn:function(item){s howPermitGridToolTip(this, App.GridPanelPermit);}}}})],id:"GridPanelPermit",maskDisabled:true,stripeRows:true,trackMouseOver: true,xtype:"grid",layout:"fit",bbar:{id:"PagingToolbarOrder",pageSize:10,xtype:"pagingtoolbar",items:[{id:"Label1",xtype:"netlabel",text:"PagerSize"},{id:"ToolbarSpacer1",width:10,xtype:"tbspacer"},{id:"ComboBox1",width:80,xtype:"combobox",selectedItems:[{value:"10"}],queryMode:"local",triggerAction:"all",store:[["2","2"],["4","4"],["10","10"]],listeners:{select:{fn:function(item,records){App. GridPanelPermit.store.pageSize = parseInt(this.getValue()); }}}},{id:"ToolbarSpacer3",width:10,xtype:"tbspacer"},{id:"QueryDisplayField",xtype:"displayfield",fieldCls:"x-toolbar-text "}],displayInfo:true},title:"Permit",titleAlign:"left",iconCls:"#Lock",columns:{items:[{id:"colSoonUsedUp",width:30,xtype:"imagecommandcolumn",dataIndex:"SoonUsedUp",tooltip:"Soon Used Up",commands:[{command:"cmdSoonUsedUpState",iconCls:"#CogDelete",tooltip:{text:"Soon Used Up"}}],prepareCommand:prepareSoonUsedUpState},{id:"colCreationDate",editable:false,width:100,xtype:"datecolumn",dataIndex:"CreationDate",groupable:false,sortable:false,text:"CreationDate",format:"d.m.Y"},{id:"colIsSingleUse",width:30,xtype:"checkcolumn",dataIndex:"IsSingleUse",groupable:false,sortable:false,text:"IsSingleUse"},{id:"colAmount",editable:false,width:60,dataIndex:"Amount",groupable:false,sortable:false,text:"Amount"},{id:"colAmontUseCount",editable:false,width:60,dataIndex:"AmountUseCount",groupable:false,sortable:false,text:"AmountUseCount"},{id:"colUseCount",editable:false,width:60,dataIndex:"UseCount",groupable:false,sortable:false,text:"Use Count"},{id:"colMeasurementTypeValue",editable:false,width:30,dataIndex:"MeasurementTypeValue",groupable:false,sortable:false,text:"MeasurementTypeValue"},{id:"colNumber",editable:false,width:100,dataIndex:"Number",groupable:false,sortable:false,text:"Number"},{id:"colOriginInformation",editable:false,width:100,flex:1,dataIndex:"OriginInformation",groupable:false,sortable:false,text:"Origin Information"},{id:"colPermitAuthorityValue",editable:false,width:100,dataIndex:"PermitAuthorityValue",groupable:false,sortable:false,text:"PermitAuthorityValue"},{id:"colPermitTypeValue",editable:false,width:100,dataIndex:"PermitTypeValue",groupable:false,sortable:false,text:"PermitTypeValue"},{width:25,xtype:"imagecommandcolumn",dataIndex:"Provider",commands:[{command:"cmdShowProvider",iconCls:"#UserEarth"}],directEvents:{command:{fn:function(item,command,r ecord,recordIndex,cellIndex){Ext.net.directRequest ({extraParams:{"ExternalProviderId": record.data.ProviderId},control:this,action:'Comma nd'});}}}},{id:"colProviderName",editable:false,width:100,dataIndex:"ProviderName",groupable:false,renderer:function (v, p, record, rowIndex) {return record.data.ProviderName + ', ' + record.data.ProviderFirstName},sortable:false,text :"ProviderName"},{width:25,xtype:"imagecommandcolumn",dataIndex:"Requestor",commands:[{command:"cmdShowRequestor",iconCls:"#User"}],directEvents:{command:{fn:function(item,command,r ecord,recordIndex,cellIndex){Ext.net.directRequest ({extraParams:{"InternalRequestorId": record.data.RequestorId},control:this,action:'Comm and'});}}}},{id:"colRequestorName",editable:false,width:100,dataIndex:"RequestorName",groupable:false,renderer:function (v, p, record, rowIndex) {return record.data.RequestorName + ', ' + record.data.RequestorFirstName},sortable:false,tex t:"RequestorName"},{id:"colStatusValue",editable:false,width:100,dataIndex:"StatusValue",groupable:false,sortable:false,text:"StatusValue"},{id:"colValideFrom",editable:false,width:100,xtype:"datecolumn",dataIndex:"ValideFrom",groupable:false,sortable:false,text:"Valid From",format:"d.m.Y"},{id:"colValideTo",editable:false,width:100,xtype:"datecolumn",dataIndex:"ValideTo",groupable:false,sortable:false,text:"Valid To",format:"d.m.Y"},{id:"colCreateUser",editable:false,hidden:true,width:100,dataIndex:"CreateUser",groupable:false,sortable:false,text:"CreateUser"},{id:"colUpdateUser",editable:false,hidden:true,width:100,dataIndex:"UpdateUser",groupable:false,sortable:false,text:"Update User"},{id:"colUpdateTime",hidden:true,width:100,xtype:"datecolumn",dataIndex:"UpdateTime",groupable:false,sortable:false,text:"UpdateTime",format:"d.m.Y"}]},selModel:window.App.RowSelectionModel1=Ext.creat e("Ext.selection.RowModel",{proxyId:"RowSelectionModel1",selType:"rowmodel",mode:"multi",directEvents:{select:{fn:function(item,record,ind ex){Ext.net.directRequest({extraParams:{"PermitId":record.data.Id,"IsSingleUse":record.data.IsSingleUse,"Amount":record.data.Amount,"MeasurementTypeValue":record.data.MeasurementTypeValue,"AmountUseCount":record.data.AmountUseCount,"UseCount":record.data.UseCount},eventMask:{showMask:true},c ontrol:this,action:'Select'});}}}})}],layout:"fit"}]

I tried to remove the Bin Stuff from the Control but the Error still occures, here's the JSON :


[{id:"Container1",xtype:"container",items:[{id:"txtSelectedItemId",xtype:"hiddenfield"},{id:"txtIsSingleUsePermit",xtype:"hiddenfield"},{id:"txtAmount",xtype:"hiddenfield"},{id:"txtAmountUseCount",xtype:"hiddenfield"},{id:"txtMeasurementTypeValue",xtype:"hiddenfield"},{id:"txtUseCount",xtype:"hiddenfield"},{id:"GridPanelPermit",maskDisabled:true,stripeRows:true,trackMouseOver: true,xtype:"grid",layout:"fit",bbar:{id:"PagingToolbarOrder",pageSize:10,xtype:"pagingtoolbar",items:[{id:"Label1",xtype:"netlabel",text:"PagerSize"},{id:"ToolbarSpacer1",width:10,xtype:"tbspacer"},{id:"ComboBox1",width:80,xtype:"combobox",selectedItems:[{value:"10"}],queryMode:"local",triggerAction:"all",store:[["2","2"],["4","4"],["10","10"]],listeners:{select:{fn:function(item,records){App. GridPanelPermit.store.pageSize = parseInt(this.getValue()); }}}},{id:"ToolbarSpacer3",width:10,xtype:"tbspacer"},{id:"QueryDisplayField",xtype:"displayfield",fieldCls:"x-toolbar-text "}],displayInfo:true},title:"Permit",titleAlign:"left",iconCls:"#Lock",columns:{items:[{id:"colSoonUsedUp",width:30,xtype:"imagecommandcolumn",dataIndex:"SoonUsedUp",tooltip:"Soon Used Up",commands:[{command:"cmdSoonUsedUpState",iconCls:"#CogDelete",tooltip:{text:"Soon Used Up"}}],prepareCommand:prepareSoonUsedUpState},{id:"colCreationDate",editable:false,width:100,xtype:"datecolumn",dataIndex:"CreationDate",groupable:false,sortable:false,text:"CreationDate",format:"d.m.Y"},{id:"colIsSingleUse",width:30,xtype:"checkcolumn",dataIndex:"IsSingleUse",groupable:false,sortable:false,text:"IsSingleUse"},{id:"colAmount",editable:false,width:60,dataIndex:"Amount",groupable:false,sortable:false,text:"Amount"},{id:"colAmontUseCount",editable:false,width:60,dataIndex:"AmountUseCount",groupable:false,sortable:false,text:"AmountUseCount"},{id:"colUseCount",editable:false,width:60,dataIndex:"UseCount",groupable:false,sortable:false,text:"Use Count"},{id:"colMeasurementTypeValue",editable:false,width:30,dataIndex:"MeasurementTypeValue",groupable:false,sortable:false,text:"MeasurementTypeValue"},{id:"colNumber",editable:false,width:100,dataIndex:"Number",groupable:false,sortable:false,text:"Number"},{id:"colOriginInformation",editable:false,width:100,flex:1,dataIndex:"OriginInformation",groupable:false,sortable:false,text:"Origin Information"},{id:"colPermitAuthorityValue",editable:false,width:100,dataIndex:"PermitAuthorityValue",groupable:false,sortable:false,text:"PermitAuthorityValue"},{id:"colPermitTypeValue",editable:false,width:100,dataIndex:"PermitTypeValue",groupable:false,sortable:false,text:"PermitTypeValue"},{width:25,xtype:"imagecommandcolumn",dataIndex:"Provider",commands:[{command:"cmdShowProvider",iconCls:"#UserEarth"}],directEvents:{command:{fn:function(item,command,r ecord,recordIndex,cellIndex){Ext.net.directRequest ({extraParams:{"ExternalProviderId": record.data.ProviderId},control:this,action:'Comma nd'});}}}},{id:"colProviderName",editable:false,width:100,dataIndex:"ProviderName",groupable:false,renderer:function (v, p, record, rowIndex) {return record.data.ProviderName + ', ' + record.data.ProviderFirstName},sortable:false,text :"ProviderName"},{width:25,xtype:"imagecommandcolumn",dataIndex:"Requestor",commands:[{command:"cmdShowRequestor",iconCls:"#User"}],directEvents:{command:{fn:function(item,command,r ecord,recordIndex,cellIndex){Ext.net.directRequest ({extraParams:{"InternalRequestorId": record.data.RequestorId},control:this,action:'Comm and'});}}}},{id:"colRequestorName",editable:false,width:100,dataIndex:"RequestorName",groupable:false,renderer:function (v, p, record, rowIndex) {return record.data.RequestorName + ', ' + record.data.RequestorFirstName},sortable:false,tex t:"RequestorName"},{id:"colStatusValue",editable:false,width:100,dataIndex:"StatusValue",groupable:false,sortable:false,text:"StatusValue"},{id:"colValideFrom",editable:false,width:100,xtype:"datecolumn",dataIndex:"ValideFrom",groupable:false,sortable:false,text:"Valid From",format:"d.m.Y"},{id:"colValideTo",editable:false,width:100,xtype:"datecolumn",dataIndex:"ValideTo",groupable:false,sortable:false,text:"Valid To",format:"d.m.Y"},{id:"colCreateUser",editable:false,hidden:true,width:100,dataIndex:"CreateUser",groupable:false,sortable:false,text:"CreateUser"},{id:"colUpdateUser",editable:false,hidden:true,width:100,dataIndex:"UpdateUser",groupable:false,sortable:false,text:"Update User"},{id:"colUpdateTime",hidden:true,width:100,xtype:"datecolumn",dataIndex:"UpdateTime",groupable:false,sortable:false,text:"UpdateTime",format:"d.m.Y"}]},selModel:window.App.RowSelectionModel1=Ext.creat e("Ext.selection.RowModel",{proxyId:"RowSelectionModel1",selType:"rowmodel",mode:"multi",directEvents:{select:{fn:function(item,record,ind ex){Ext.net.directRequest({extraParams:{"PermitId":record.data.Id,"IsSingleUse":record.data.IsSingleUse,"Amount":record.data.Amount,"MeasurementTypeValue":record.data.MeasurementTypeValue,"AmountUseCount":record.data.AmountUseCount,"UseCount":record.data.UseCount},eventMask:{showMask:true},c ontrol:this,action:'Select'});}}}})}],layout:"fit"}]

That's the Window


<ext:Window runat="server" ID="winPermit" Hidden="True" Width="1080" Height="550" PageX="100" PageY="100" Layout="fitlayout">
<Items>
<ext:Panel runat="server" Border="false" ID="permitUserControl">
<Loader ID="Loader1"
runat="server"
AutoLoad="true"
DirectMethod="#{DirectMethods}.GetPermitControl"
Mode="Component">
<LoadMask ShowMask="true" />
</Loader>
<Buttons>
<ext:Button runat="server" ID="Button4" Text="Close">
<Listeners>
<Click Handler="winContactHide();" />
</Listeners>
</ext:Button>

<ext:Button runat="server" ID="Button5" Text="Save" Icon="Disk">
<Listeners>
<Click Handler="setPermit()" />
</Listeners>
</ext:Button>
</Buttons>

</ext:Panel>
</Items>
</ext:Window>

Any Idea whats wrong here ?

Daniil
May 17, 2013, 2:29 PM
Hi Peter,

Please put the CSS and JavaScript stuff into the Container's HtmlBin.

Peter.Treier
May 17, 2013, 2:35 PM
Hi Peter,

Please put the CSS and JavaScript stuff into the Container's HtmlBin.

Ah, OK !

Other Question about the Loader, the Page_Load in the ASCX isn't called. Any hints to call this in a simple way ?

Peter

Daniil
May 17, 2013, 2:59 PM
A ComponentLoader doesn't execute a user control's life cycle.

To execute some code behind of a user control, please use the Ext.Net.IDynamicUserControl interface, see DynamicItems.ascx here.
http://examples2.ext.net/#/Loaders/Component/Direct_Method/

If you need to set up some user control's properties, please look at this post.
http://forums.ext.net/showthread.php?24865#post109300

Peter.Treier
May 17, 2013, 5:54 PM
A ComponentLoader doesn't execute a user control's life cycle.

To execute some code behind of a user control, please use the Ext.Net.IDynamicUserControl interface, see DynamicItems.ascx here.
http://examples2.ext.net/#/Loaders/Component/Direct_Method/

If you need to set up some user control's properties, please look at this post.
http://forums.ext.net/showthread.php?24865#post109300

Thanks for this, I'll try it :-)
Peter