What's New?

[CLOSED] Disabled textfield not posting updated text to DirectEvent if textfield is setValue in client javascript.

  1. #1
    Aug 15, 2013, 12:28 PM

    [CLOSED] Disabled textfield not posting updated text to DirectEvent if textfield is setValue in client javascript. 

    <%@ Page Language="C#" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>


<script runat="server">
    protected void Page_Load( object sender, EventArgs e ) {
        TitleE.Text = "Test";
        STitleE.Text = "";
    }
    protected void OnTitle( object sender, DirectEventArgs e ) {
        X.MessageBox.Alert( "STitle", STitleE.Text.Trim() ).Show();
    }
</script>


<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>Test29</title>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Viewport ID="vp" runat="server" >
    <Items>
        <ext:FormPanel runat="server" >
        <HtmlBin>
            <ext:XScript ID="XScript1" runat="server">
            <script type="text/javascript">
        var TitleEdit = {
            changeTitle: function() {
                var title = #{TitleE}.getValue();
                if(!title) return;
                #{STitleE}.setValue(title); 
            },
            enableSTitle: function(set) {
                if(set) #{STitleE}.enable(); else #{STitleE}.disable();
            }
        };
            </script>
            </ext:XScript>
        </HtmlBin>
        <Items>


            <ext:TextField ID="TitleE" runat="server" MaxLength="80" EnforceMaxLength="true" FieldLabel="Title"
                Width="560" EmptyText="Title" MinLength="2" AllowBlank="false"
                CausesValidation="true" EnableKeyEvents="true" Flex="1">
                <Listeners>
                    <KeyUp Handler="TitleEdit.changeTitle();" />
                </Listeners>
            </ext:TextField>


            <ext:FieldContainer ID="FieldContainer1" runat="server" FieldLabel="Short Title" AnchorHorizontal="100%" Layout="HBoxLayout" Flex="1">
                <Items>


                    <ext:TextField ID="STitleE" runat="server" MaxLength="12" EnforceMaxLength="true" Width="94"
                        EmptyText="ShortEvntName" MinLength="2" AllowBlank="false" CausesValidation="true" Disabled="true">
                        <Listeners>
                            <AfterRender Handler="TitleEdit.changeTitle();" />
                        </Listeners>
                    </ext:TextField>
                    <ext:Checkbox ID="STitleCk" runat="server" BoxLabel="Override">
                        <Listeners>
                            <Change Handler="if(this.checked) #{STitleE}.enable(); else #{STitleE}.disable();" />
                        </Listeners>
                    </ext:Checkbox>


                </Items>
            </ext:FieldContainer>






        </Items>
            <Buttons>




                <ext:Button ID="TitleSubB" runat="server" Text="Save" Icon="Disk" CausesValidation="true" Type="Submit">
                    <DirectEvents>
                        <Click OnEvent="OnTitle">
                            <EventMask ShowMask="true" MinDelay="500" Msg="Saving Titles" />
                        </Click>
                    </DirectEvents>
                </ext:Button>


            </Buttons>
        </ext:FormPanel>
    </Items>
    </ext:Viewport>


    </form>
</body>
</html>
    If I don't enable the StitleE with the checkbox, the return result is the original value. If I do, it sends the revised value to the direct event.
    I need this value. It seems strange that if I set STitleE.Text = "New" in Page_Load instead. I'll receive "New" displayed on Submit if textfield disabled, and "Test" if enabled. This seems broken.
    Last edited by Daniil; Aug 20, 2013 at 9:15 AM. Reason: [CLOSED]
  2. #2
    Aug 15, 2013, 2:11 PM
    Hi @michaeld,

    Disabled fields are not submitted.
    http://www.w3.org/TR/html401/interac...ssful-controls

    17.13.2 Successful controls

    A successful control is "valid" for submission. [snip]

    • Controls that are disabled cannot be successful.
    You could use ReadOnly instead.
  3. #3
    Aug 16, 2013, 7:20 AM
    I tried the following addition to the direct event to resolve the condition without effect.

    Before="TitleEdit.enableSTitle(true); return true;"
    Last edited by Daniil; Aug 16, 2013 at 2:21 PM. Reason: Please use [CODE] tags
  4. #4
    Aug 16, 2013, 7:35 AM
    I think the Page_Load's code should be wrapped in !X.IsAjaxReuest condition. Could you try?
  5. #5
    Aug 16, 2013, 12:53 PM
    Yeah, that did the trick. It was an oversight in the demo for sure.

    BTW, I spent a lot of time trying ReadOnly after I had thought the last-moment enable technique above wouldn't work. setReadOnly was effective when it replaced the code in my example but when I created different samples, results were strange. The style did not change to the standard readonly settings you'd expect.

    I'm not going to spend too much time on it because I've gotten my original solution working, but I'll submit the code below for you to look at if you want to investigate if it's a bug or just an oversight on my part.


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


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


<script runat="server">
    protected void Page_Load( object sender, EventArgs e ) {
        if( X.IsAjaxRequest )
            return;
        TitleE.Text = "Test";
        STitleE.Text = "";
    }
    protected void OnTitle( object sender, DirectEventArgs e ) {
        X.MessageBox.Alert( "STitle", STitleE.Text.Trim() ).Show();
    }
</script>


<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>Test29</title>
</head>
<body>
    <form id="Form1" runat="server">
        <ext:ResourceManager ID="ResourceManager1" runat="server" ViewStateMode="Enabled" />


        <ext:Viewport ID="vp" runat="server">
            <HtmlBin>
                <ext:XScript ID="XScript1" runat="server">
                        <script type="text/javascript">
                            var TitleEdit = {
                                changeTitle: function (ctl, text) {
                                    ctl.setValue(text);
                                },
                                enableSTitle: function (ctl, set) {
                                    ctl.setReadOnly(!set);
                                }
                            };
                        </script>
                </ext:XScript>


                <style type="text/css">
                    .disabled { background-color: blue; }
                </style>
            </HtmlBin>
            <Bin>


                <ext:Window ID="TitleW" runat="server" Resizable="false" CloseAction="Hide" Hidden="true" DefaultButton="TitleSubB"
                    Title="Edit" Width="600" DefaultFocus="TitleE" AutoShow="true">
                    <Items>


                        <ext:FormPanel ID="TitleF" runat="server" LabelAlign="Left" LabelWidth="60" Frame="true"
                            BodyStyle="padding-left:6px;">
                            <Items>


                                <ext:TextField ID="TitleE" runat="server" MaxLength="80" EnforceMaxLength="true" FieldLabel="Title"
                                    Width="560" EmptyText="Title" MinLength="2" AllowBlank="false"
                                    CausesValidation="true" EnableKeyEvents="true" Flex="1">
                                </ext:TextField>


                                <ext:FieldContainer ID="FieldContainer1" runat="server" FieldLabel="Short Title" AnchorHorizontal="100%" Layout="HBoxLayout" Flex="1">
                                    <Items>


                                        <ext:TextField ID="STitleE" runat="server" MaxLength="12" EnforceMaxLength="true" Width="94"
                                            EmptyText="ShortName" MinLength="2" AllowBlank="false" CausesValidation="true" ReadOnly="true" ReadOnlyCls="disabled">
                                            <Listeners>
                                                <AfterRender Handler="TitleEdit.changeTitle(#{STitleE}, 'Test');" />
                                            </Listeners>
                                        </ext:TextField>


                                        <ext:Checkbox ID="STitleCk" runat="server" BoxLabel="Override">
                                            <Listeners>
                                                <Change Handler="TitleEdit.enableSTitle(#{STitleE}, this.checked); " />
                                            </Listeners>
                                        </ext:Checkbox>


                                    </Items>
                                </ext:FieldContainer>


                            </Items>
                            <Buttons>


                                <ext:Button ID="TitleSubB" runat="server" Text="Save" Icon="Disk" CausesValidation="true" Type="Submit">
                                    <DirectEvents>
                                        <Click OnEvent="OnTitle">
                                            <EventMask ShowMask="true" MinDelay="500" Msg="Saving Titles" />
                                        </Click>
                                    </DirectEvents>
                                </ext:Button>


                            </Buttons>
                        </ext:FormPanel>


                    </Items>
                </ext:Window>


            </Bin>
        <Items>
            <ext:FormPanel runat="server">
                <Items>


            <ext:TextField ID="STitleE2" runat="server" MaxLength="12" EnforceMaxLength="true" Width="94"
                EmptyText="Sname" MinLength="2" AllowBlank="false" CausesValidation="true" ReadOnly="true" ReadOnlyCls="disabled">
                <Listeners>
                    <AfterRender Handler="TitleEdit.changeTitle(#{STitleE2}, 'Test');" />
                </Listeners>
            </ext:TextField>


                </Items>
            </ext:FormPanel>


        </Items>
        </ext:Viewport>


    </form>
</body>
</html>
    Note that the text input field, which normally should go grey text and diminish to indicate its readonly is still as prominant as a regular text field without readonly. Not only that but it doesn't take on the ReadOnlyCls settings for background.
  6. #6
    Aug 16, 2013, 2:40 PM
    Quote Originally Posted by michaeld View Post
    Note that the text input field, which normally should go grey text and diminish to indicate its readonly is still as prominant as a regular text field without readonly.
    Well, ExtJS/Ext.NET don't stylize read-only fields like disabled ones. So, you won't notice any difference how these fields look.
    <ext:TextField runat="server" Text="Some initial value" />
<ext:TextField runat="server" Text="Some initial value" ReadOnly="true" />
    I think a browser could add some styles because of a readOnly attribute, but, at least, in FireFox the above fields look the same.

    Yes, you can stylize it via ReadOnlyCls as you are trying.

    Quote Originally Posted by michaeld View Post
    Not only that but it doesn't take on the ReadOnlyCls settings for background.
    You should prune background-image.

    Example
    <style>
    .my-read-only input.x-form-field {
        background-color: blue;
        background-image: none;
        color: white;
    }
</style>
    <ext:TextField runat="server" Text="Some initial value" ReadOnly="true" ReadOnlyCls="my-read-only" />
    Instead of using ReadOnlyCls you can stylize read-only things globally.

    Example
    <style>
    .x-form-readonly input.x-form-field {
        background-color: blue;
        background-image: none;
        color: white;
    }
</style>
    <ext:TextField runat="server" Text="Some initial value" ReadOnly="true" />

Similar Threads

  1. [CLOSED] Window with textfield is posting on enter
    By SouthDeveloper in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 05, 2012, 7:50 PM
  2. Textfield value is not updated
    By Anburaja in forum 1.x Help
    Replies: 4
    Last Post: Oct 15, 2012, 4:32 AM
  3. Blur Listener - setValue on Textfield not working?
    By Tbaseflug in forum 1.x Help
    Replies: 4
    Last Post: Jul 01, 2012, 3:04 AM
  4. [CLOSED] Making black text in disabled TextField with fieldClass added on this.
    By ViDom in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 25, 2012, 4:31 PM
  5. [CLOSED] how to display text or value in textfield using javascript
    By Vasudhaika in forum 1.x Legacy Premium Help
    Replies: 6
    Last Post: Mar 19, 2011, 11:18 AM

Posting Permissions