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

  1. #1

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

    Hi all

    I need to load a user Control into a Ext Window. I proceed like in your example (https://examples2.ext.net/#/Loaders/.../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('AlwaysNew', 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.triggerElement)),
                                            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.triggerElement)),
                                            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:function(item){return onBeforeShow(this ,App.GridPanelPermit);}},show:{fn:function(item){showPermitGridToolTip(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,record,recordIndex,cellIndex){Ext.net.directRequest({extraParams:{"ExternalProviderId": record.data.ProviderId},control:this,action:'Command'});}}}},{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,record,recordIndex,cellIndex){Ext.net.directRequest({extraParams:{"InternalRequestorId": record.data.RequestorId},control:this,action:'Command'});}}}},{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,text:"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.create("Ext.selection.RowModel",{proxyId:"RowSelectionModel1",selType:"rowmodel",mode:"multi",directEvents:{select:{fn:function(item,record,index){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},control: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,record,recordIndex,cellIndex){Ext.net.directRequest({extraParams:{"ExternalProviderId": record.data.ProviderId},control:this,action:'Command'});}}}},{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,record,recordIndex,cellIndex){Ext.net.directRequest({extraParams:{"InternalRequestorId": record.data.RequestorId},control:this,action:'Command'});}}}},{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,text:"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.create("Ext.selection.RowModel",{proxyId:"RowSelectionModel1",selType:"rowmodel",mode:"multi",directEvents:{select:{fn:function(item,record,index){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},control: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 ?
    Last edited by Daniil; May 23, 2013 at 4:14 AM. Reason: [CLOSED]
  2. #2
    I was able to fix this error by removing all CSS and Script content on the User Control.
    Is this what you suggest ?

    Peter


    Quote Originally Posted by Peter.Treier View Post
    Hi all

    I need to load a user Control into a Ext Window. I proceed like in your example (https://examples2.ext.net/#/Loaders/.../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('AlwaysNew', 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.triggerElement)),
                                            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.triggerElement)),
                                            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:function(item){return onBeforeShow(this ,App.GridPanelPermit);}},show:{fn:function(item){showPermitGridToolTip(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,record,recordIndex,cellIndex){Ext.net.directRequest({extraParams:{"ExternalProviderId": record.data.ProviderId},control:this,action:'Command'});}}}},{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,record,recordIndex,cellIndex){Ext.net.directRequest({extraParams:{"InternalRequestorId": record.data.RequestorId},control:this,action:'Command'});}}}},{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,text:"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.create("Ext.selection.RowModel",{proxyId:"RowSelectionModel1",selType:"rowmodel",mode:"multi",directEvents:{select:{fn:function(item,record,index){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},control: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,record,recordIndex,cellIndex){Ext.net.directRequest({extraParams:{"ExternalProviderId": record.data.ProviderId},control:this,action:'Command'});}}}},{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,record,recordIndex,cellIndex){Ext.net.directRequest({extraParams:{"InternalRequestorId": record.data.RequestorId},control:this,action:'Command'});}}}},{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,text:"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.create("Ext.selection.RowModel",{proxyId:"RowSelectionModel1",selType:"rowmodel",mode:"multi",directEvents:{select:{fn:function(item,record,index){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},control: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 ?
  3. #3
    Hi Peter,

    Please put the CSS and JavaScript stuff into the Container's HtmlBin.
  4. #4
    Quote Originally Posted by Daniil View Post
    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
  5. #5
    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.
    https://examples2.ext.net/#/Loaders/...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
  6. #6
    Quote Originally Posted by Daniil View Post
    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.
    https://examples2.ext.net/#/Loaders/...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

Similar Threads

  1. Replies: 8
    Last Post: Feb 06, 2013, 6:27 PM
  2. [CLOSED] reference of a control loaded by component loader
    By mirwais in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Dec 28, 2012, 1:05 PM
  3. Replies: 1
    Last Post: Sep 22, 2012, 8:08 PM
  4. [CLOSED] Runtime error in abstract component .cs
    By feanor91 in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Apr 18, 2012, 11:24 AM
  5. [CLOSED] JavaScript error on ASCX page
    By egodoy in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Oct 29, 2009, 5:58 PM

Posting Permissions