[CLOSED] [1.0] Resizable issue in a User Control

[egodoy]

Hello,
I want to let the user resize a TextArea control in a *.ascx control that is sitting on an *.aspx.
I'm not sure if this is possible. It works fine an a few aspx pages already.
In the User Control i'm getting a JavaScript error;
Microsoft JScript runtime error: 'this.el' is null or not an object

The debugger shows the following line;
this.el=this.el.wrap(typeof e.wrap=="object"?e.wrap:{cls:"xresizable-wrap"})

I have pasted the html code below

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProjectReferenceEdit.ascx.cs"
    Inherits="WebClientTrackerII.App.Projects.References.ProjectReferenceEdit" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script type="text/javascript">
    var ProjectReferencesRecord;
    
    var openProjectReferencesDetails = function (record, animTrg) {
    
        ProjectReferencesRecord = record;
        var window = <%= ProjectReferenceEditwindow.ClientID %>;
        window.setTitle(String.format('Project Reference: {0}',record.data['PRJCT_REFERNC_SUBJ_TXT']));
        
        <%= recvdDate.ClientID %>.setValue(record.data['PRJCT_REFERNC_RECVD_DT']);
        <%= TypeCmbx.ClientID %>.setValue(record.data['PRJCT_REFERNC_REFERNC_TYPE_ID']);
        <%= subjecttxt.ClientID %>.setValue(record.data['PRJCT_REFERNC_SUBJ_TXT']);
        <%= contentTxtArea.ClientID %>.setValue(record.data['PRJCT_REFERNC_TXT']);
        <%= fileNameTxt.ClientID %>.setValue(record.data['PRJCT_REFERNC_DOCMT_NM']);
        <%= FileName.ClientID %>.setValue(record.data['PRJCT_REFERNC_DOCMT_NM']);
        <%= RecordKeyID.ClientID %>.setValue(record.data['PRJCT_REFERNC_ID']);
        <%= fundingDocumentID.ClientID %>.setValue(record.data['PRJCT_REFERNC_FNDG_DOCMT_ID']);
        <%= FileUploadField1.ClientID %>.reset();
        <%= viewFile.ClientID %>.show();
        <%= tlbrViewReference.ClientID %>.show();
        
        window.show('');
    }
    
       var openReferencesDetailsNew = function(record) {
        


        var currentTime = new Date()
            
        ProjectReferencesRecord = record;
        var window = <%= ProjectReferenceEditwindow.ClientID %>;
        window.setTitle('New Project Reference');
        
        <%= recvdDate.ClientID %>.setValue(currentTime);
        <%= TypeCmbx.ClientID %>.setValue('');
        <%= subjecttxt.ClientID %>.setValue('');
        <%= contentTxtArea.ClientID %>.setValue('');
        <%= fileNameTxt.ClientID %>.setValue('');
        <%= FileUploadField1.ClientID %>.reset();
        <%= RecordKeyID.ClientID %>.setValue('');
        <%= tlbrViewReference.ClientID %>.hide();
        <%= viewFile.ClientID %>.hide();


        window.show();
        
    }    
    
          var failureHandler = function(form, action) {            
          var msg = '';            
          if (action.result &amp;&amp; action.result.errors &amp;&amp; action.result.errors.length > 0) {
                          msg = 'Failure during Ajax.';            
                          } else if (action.result &amp;&amp; action.result.extraParams.Message) {                
                          msg = action.result.extraParams.Message;            
                          } else if (action.response) {                
                          msg = action.response.responseText;            
                          }            
                          Ext.Message.show({                
                          title: 'Save Error',                
                          msg: msg,                
                          buttons: Ext.Message.OK,                
                          icon: Ext.Message.ERROR            });        
                          }
    
        
</script>


<asp:SqlDataSource ID="SqlDataSourceRefernceType" runat="server" ConnectionString="<%$ connectionStrings:DBConnectionString %>"
    ProviderName="<%$ connectionStrings:DBConnectionString.ProviderName %>" SelectCommand="SELECT REFERNC_TYPE_ID,
                    REFERNC_TYPE_NM,
                    REFERNC_TYPE_ACTV_IND
                FROM TRACKER2.REFERNC_TYPE"></asp:SqlDataSource>
<ext:Store ID="storeReferences" runat="server" DataSourceID="SqlDataSourceRefernceType">
    <Reader>
        <ext:JsonReader IDProperty="REFERNC_TYPE_ID">
            <Fields>
                <ext:RecordField Name="REFERNC_TYPE_ID" />
                <ext:RecordField Name="REFERNC_TYPE_NM" />
                <ext:RecordField Name="REFERNC_TYPE_ACTV_IND" />
            </Fields>
        </ext:JsonReader>
    </Reader>
</ext:Store>
<ext:Hidden ID="RecordKeyID" runat="server" />
<ext:Hidden ID="fundingDocumentID" runat="server" />
<ext:Hidden ID="FileName" runat="server" />
 <ext:Resizable ID="resizeText" runat="server" 
            Element="contentTxtArea" 
            Wrap="true"
            Pinned="true"
            Width="400"
            Height="120"
            MinWidth="200"
            MinHeight="50"
            Dynamic="true"
            >
        </ext:Resizable>
<ext:Window ID="referenceWindow" runat="server" Title="Reference" Height="220px"
    Width="400px" BodyStyle="padding: 1px;" Collapsible="True" Modal="True" Icon="Application"
    AutoShow="false" Hidden="true" Resizable="false">
    <Content>
        <ext:Panel ID="refernceViewPnl" runat="server" Border="false" Header="false" Frame="false"
            BodyStyle="" Layout="Fit">
            <Content>
                <ext:TextArea ID="referenceText" runat="server" Height="180" Width="380" MaxLength="4000">
                </ext:TextArea>
            </Content>
        </ext:Panel>
    </Content>
</ext:Window>
<ext:Window ID="ProjectReferenceEditWindow" runat="server" Width="600" Height="300"
    AutoShow="false" Modal="true" Hidden="true" Resizable="false" BodyStyle="padding:5px; background-color:#F6F3EC">
    <Content>
        <ext:ColumnLayout ID="ColumnLayout1" runat="server">
            <Columns>
            <ext:LayoutColumn ColumnWidth=".5">
                    <ext:Panel ID="Panel2" runat="server" Frame="false" Border="false" BodyStyle="background-color:#F6F3EC">
                        <Content>
                            <ext:FormLayout ID="FormLayout2" runat="server" LabelAlign="Left" LabelWidth="40">
                                <Anchors>
                                  <ext:Anchor>
                                        <ext:DateField ID="recvdDate" runat="server" FieldLabel="Date" Width="120">
                                        </ext:DateField>
                                    </ext:Anchor>
                                    
                                    <ext:Anchor>
                                        <ext:FileUploadField ID="FileUploadField1" runat="server" EmptyText="Select a File"
                                            FieldLabel="" HideLabel="true" ButtonText="" Icon="ImageAdd" Width="250">
                                        </ext:FileUploadField>
                                    </ext:Anchor>
                                    <ext:Anchor>
                                        <ext:TextField ID="fileNameTxt" runat="server" FieldLabel="File Name" Width="200"
                                            Disabled="true">
                                        </ext:TextField>
                                    </ext:Anchor>
                                    <ext:Anchor>
                                        <ext:Button ID="viewFile" runat="server" Text="View File" Icon="PageWhiteGet">
                                            <DirectEvents>
                                                <Click OnEvent="ViewAttachedDocument" Timeout="300000">
                                                    <ExtraParams>
                                                        <ext:Parameter Name="id" Value="#{RecordKeyID}.getValue()" Mode="Raw" />
                                                    </ExtraParams>
                                                </Click>
                                            </DirectEvents>
                                        </ext:Button>
                                    </ext:Anchor>
                                </Anchors>
                            </ext:FormLayout>
                        </Content>
                    </ext:Panel>
                </ext:LayoutColumn>
                <ext:LayoutColumn ColumnWidth=".5">
                    <ext:Panel ID="Panel1" runat="server" Border="false" Header="false" Frame="false"
                        BodyStyle="background-color:#F6F3EC">
                        <Content>
                            <ext:FormLayout ID="FormLayout1" runat="server" LabelAlign="Left" LabelWidth="10" >
                                <Anchors>
                                  <ext:Anchor>
                                        <ext:ComboBox ID="TypeCmbx" runat="server" StoreID="storeReferences" DisplayField="REFERNC_TYPE_NM"
                                            ValueField="REFERNC_TYPE_ID" TriggerAction="All" Mode="Local" Select&#111;nfocus="true"
                                            Editable="false" FieldLabel="Type"  LabelAlign="Right" >
                                            <DirectEvents>
                                               <Select OnEvent="SelectedReferenceType">
                                                    <ExtraParams>
                                                        <ext:Parameter Name="slectedItem" Value="#{TypeCmbx}.getText()" Mode="Raw">
                                                        </ext:Parameter>
                                                    </ExtraParams>
                                                </Select>
                                            </DirectEvents>
                                        </ext:ComboBox>
                                    </ext:Anchor>
                                    <ext:Anchor>
                                        <ext:TextField ID="subjecttxt" runat="server" FieldLabel="Subject" Width="200">
                                        </ext:TextField>
                                    </ext:Anchor>
                                    <ext:Anchor>
                                        <ext:TextArea ID="contentTxtArea" runat="server" FieldLabel="Content" Width="500"
                                            Height="160">
                                        </ext:TextArea>
                                    </ext:Anchor>
                                </Anchors>
                            </ext:FormLayout>
                        </Content>
                        
                    </ext:Panel>
                </ext:LayoutColumn>
                
            </Columns>
        </ext:ColumnLayout>
        
    </Content>
    
    <BottomBar>
        <ext:Toolbar ID="btmToolbar1" runat="server">
            <Items>
                <ext:Button ID="tlbrViewReference" runat="server" Text="View Reference" StandOut="true"
                    Icon="PageWhiteGet">
                    <DirectEvents>
                        <Click OnEvent="ViewReference">
                            <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{ProjectReferenceEditWindow}.body}" />
                        </Click>
                    </DirectEvents>
                </ext:Button>
                <ext:ToolbarFill ID="toolbarFill1" runat="server">
                </ext:ToolbarFill>
                <ext:Button ID="saveToolbarBtn" runat="server" Text="Save" Icon="Disk" StandOut="true">
                    <DirectEvents>
                        <Click OnEvent="SaveReference" Timeout="300000" Failure="Ext.MessageBox.alert('Saving failed', 'Error during ajax event');">
                            <EventMask ShowMask="true" Target="CustomTarget" CustomTarget="={#{ProjectReferenceEditWindow}.body}" />
                            <ExtraParams>
                                <ext:Parameter Name="id" Value="#{RecordKeyID}.getValue()" Mode="Raw" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
                <ext:Button ID="cancelToolbarBtn" runat="server" Text="Cancel" Icon="Cancel" StandOut="true">
                    <Listeners>
                        <Click Handler="#{ProjectReferenceEditWindow}.hide(null);" />
                    </Listeners>
                </ext:Button>
            </Items>
        </ext:Toolbar>
    </BottomBar>
    
</ext:Window>

Thank you in advance.

[Vladimir]

Hi,

Try to move Resizable after the Window with TextArea and change Element property as following

Element="#{contentTxtArea}"

[egodoy]

Vladsch,
I made your suggested change and gives me "Invalid source HTML for this operation"

[Vladimir]

Hi,

Where you get that error? Is it server side or client side error? Can you post modified user control (just remove all unrequired markup, like SqlDataSource)?

[egodoy]

Vladsch,

This is a simplified version.

aspx

<%@ Page Language="C#" %>


<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Src="WebUserControl1.ascx" TagName="WebUserControl1" TagPrefix="uc1" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Test Resizable control</title>
    <link href="../../../../resources/css/examples.css" rel="stylesheet" type="text/css" />


    <script type="text/javascript" language="javascript">
        function openReference() {
            openReferencesDetails();
        }
    </script>


</head>
<body>
    <form id="form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server"/>
    <h1>
        Resizable Test</h1>
    <ext:Button ID="btnTest" runat="server" Text="Open Window" StandOut="true">
        <Listeners>
            <Click Fn="openReference" />
        </Listeners>
    </ext:Button>
    <uc1:WebUserControl1 ID="WebUserControl11" runat="server" />
    </form>
</body>
</html>

ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="TestArea.WebUserControl1" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script language="javascript" type="text/javascript">


 var openReferencesDetails = function () {
        
        var window = <%= referencewindow.ClientID %>;
        window.show('');
        
        }
</script>
<ext:Window ID="referenceWindow" runat="server" Title="ref" Height="330px"
    Width="500px" BodyStyle="padding: 1px;" Collapsible="True" Modal="True" Icon="Application"
    AutoShow="false" Hidden="true" Resizable="false">
    <Content>
        <ext:Panel ID="refernceViewPnl" runat="server" Border="false" Header="false" Frame="false"
            BodyStyle="" >
            <Content>
                <ext:TextArea ID="referenceText" runat="server" Height="180" Width="380" MaxLength="4000">
                </ext:TextArea>
            </Content>
        </ext:Panel>
    </Content>
</ext:Window>
<ext:Resizable ID="Resizable1" runat="server" 
            Element="#{referenceText}" 
            Width="200"
            Height="100"
            MinWidth="100"
            MinHeight="50"
            >
        </ext:Resizable>

[Vladimir]

Hi,

You forgot to add Wrap="true" to the Resizable1

[egodoy]

Works!
Thank you!