What's New?

Setting TextField ReadOnly property to toggle on click of button

  1. #1
    Dec 22, 2011, 10:56 AM

    Setting TextField ReadOnly property to toggle on click of button

    Hi,

    I am using asp.Net MVC so viewstate is not there, i try to pass the readOnly property of textfield as a parameter but on every click event of the direct event it gives the readonly = false at server side, below is the code that i am working with.
    the aspx page is as below
    <body>
    <ext:ResourceManager ID="ResourceManager1" runat="server">
    </ext:ResourceManager>
 
    <ext:Window ID="Window_add_PURL"  runat="server"  Icon="Star" Title="Add a new Prefered url" X="250" Y="100" Height="150" Width="250">
  <Items> 

        <ext:TextField ID="purl_url" FieldLabel="URLTo:" runat="server" Text="http://" >
        </ext:TextField>
        
        <ext:Button ID="bt_add_purl"  HandleMouseEvents="true" runat="server" Text="Add" Icon="Accept">
           <DirectEvents>
                <Click OnEvent="add_purl">
                    <EventMask ShowMask="true" MinDelay="500" Msg="Saving setting..." />
                    <ExtraParams>
                        <ext:Parameter Name="url" Mode="Raw" Value="purl_url.getValue()">
                        </ext:Parameter>
                        <ext:Parameter Name="readonly" Mode="Raw" Value="purl_url.readOnly">
                        </ext:Parameter>
                    </ExtraParams>
                </Click>           
           </DirectEvents>            
        </ext:Button>        
   </Items>
</ext:Window>
</body>
    <script runat="server">
    protected void add_purl(object sender, DirectEventArgs e)
    {
        string id = purl_url.ClientID;
        if (X.IsAjaxRequest)
        {
            string purl = e.ExtraParams[0].ValueToString();
            string s = e.ExtraParams[1].ValueToString();
            if (s == "\"false\"")
            {
                this.purl_url.ReadOnly = true;
                purl_url.AddScript("{0}.trigger.un('click', {0}.onTriggerClick, {0});", purl_url.ClientID);

            }
            else
            {
                this.purl_url.ReadOnly = false;
                purl_url.AddScript("{0}.oldTriggerClick = {0}.onTriggerClick; {0}.onTriggerClick = Ext.emptyFn;", purl_url.ClientID);
            }
        }
    }
</script>
    Any kind of help is appreciated. Thanks in advance.
  2. #2
    Dec 27, 2011, 1:32 PM
    Hi,

    It appears to be working for me.

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

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

<script runat="server">
    protected void GetReadOnly(object sender, DirectEventArgs e)
    {
        X.Msg.Alert("readOnly", e.ExtraParams["readOnly"]).Show();
    }
</script>

<!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 runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TextField ID="TextField1" runat="server" />
        <ext:Button runat="server" Text="Toggle readOnly">
            <Listeners>
                <Click Handler="TextField1.setReadOnly(!TextField1.readOnly);" />
            </Listeners>
        </ext:Button>
        <ext:Button runat="server" Text="Get ReadOnly status">
            <DirectEvents>
                <Click OnEvent="GetReadOnly">
                    <ExtraParams>
                        <ext:Parameter Name="readOnly" Value="TextField1.readOnly" Mode="Raw" />
                    </ExtraParams>
                </Click>
            </DirectEvents>
        </ext:Button>
    </form>
</body>
</html>
    Do you use Ext.NET v1.2? If no, please update and re-test.
  3. #3
    Jan 03, 2012, 12:29 PM
    Thanks for the reply.
    No its not working at my end. yes i am using EXT.Net 1.2.0.21945, I just did a copy paste of your code to be sure on a new web form (aspx) page, below is the code. When i run this form, it gives me a textbox so i enter a value which it allows me to do that, i click on button "Get ReadOnly status" it shows me false, then i click "Toggle readOnly" the textbox is set to readonly it doesnt allow me to enter any value after which when i click the button "Get ReadOnly status" it shows me false.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebTestForm1.aspx.cs" Inherits="CooliteTestApplication1.WebTestForm1" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected void GetReadOnly(object sender, DirectEventArgs e)
    {
        X.Msg.Alert("readOnly", e.ExtraParams["readOnly"]).Show();
    }
</script>
<!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 runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:TextField ID="TextField1" runat="server" />
        <ext:Button ID="Button1" runat="server" Text="Toggle readOnly">
            <Listeners>
                <Click Handler="TextField1.setReadOnly(!TextField1.readOnly);" />
            </Listeners>
        </ext:Button>
        <ext:Button ID="Button2" runat="server" Text="Get ReadOnly status">
            <DirectEvents>
                <Click OnEvent="GetReadOnly">
                    <ExtraParams>
                        <ext:Parameter Name="readOnly" Value="TextField1.readOnly" Mode="Raw" />
                    </ExtraParams>
                </Click>
            </DirectEvents>
        </ext:Button>
    </form>
</body>
</html>
    Any help is appreciated.
  4. #4
    Jan 03, 2012, 2:27 PM
    Confirmed, it was fixed after v1.2 release and will be publicly available with the upcoming v1.3 release.

    To fix it locally, please add the following code into a page's head:

    Fix
    <ext:ResourcePlaceHolder runat="server" Mode="ScriptFiles" />

<script type="text/javascript">
    Ext.form.Field.prototype.setReadOnly = function (readOnly) {
        if (this.rendered) {
            this.el.dom.readOnly = readOnly;
        }
        this.readOnly = readOnly;
    };
</script>
  5. #5
    Jan 04, 2012, 4:38 AM
    Thanks Daniil very much.
    Now it is working fine as required.
    You can mark this as closed.

Similar Threads

  1. [CLOSED] How toggle button keep active even after click on it
    By rnachman in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Jan 01, 2012, 4:54 PM
  2. Setting the TextField ReadOnly property to toggle on click of Button
    By nil5286 in forum 1.x Help
    Replies: 2
    Last Post: Dec 20, 2011, 8:18 AM
  3. Setting GridPanel datasource on button click rather than on page load
    By rcearley in forum 1.x Help
    Replies: 1
    Last Post: Oct 12, 2010, 8:39 PM
  4. [CLOSED] Textfield Readonly Property
    By speedstepmem2 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Mar 24, 2009, 11:52 AM
  5. How to set ReadOnly property to a textfield?
    By afhi in forum 1.x Help
    Replies: 1
    Last Post: Nov 21, 2008, 7:10 AM

Tags for this Thread

Posting Permissions