What's New?

[CLOSED] TextField with InputTextMask - Mark Read-Only??

  1. #1
    Dec 19, 2011, 9:54 PM

    [CLOSED] TextField with InputTextMask - Mark Read-Only??

    Hello

    How to mark read-only a "TextField" using a "InputTextMask".
    Here is the test case (see below)
    Advise..

    <%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Test-2.aspx.vb" Inherits="EBSPortalClient.Test_2" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Assembly="Ext.Net.UX" Namespace="Ext.Net.UX" TagPrefix="ux" %>

<!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" Namespace="CompanyX" />
    <div>
        <ext:Panel runat="server" ButtonAlign="Left">
            <Items>
                <ext:TextField ID="gfeDueField" runat="server" FieldLabel="GFE Due Date" AllowBlank="true"
                    EmptyText="mm/dd/yyyy hh:mm am/pm">
                    <Plugins>
                        <ux:InputTextMask ID="gfeDueDateInputTextMask" runat="server" ClearWhenInvalid="false"
                            Visible="true" Mask="X[0|1]X9/X[0|1|2|3]X9/9999 X[0|1]X9:99 X[a|p]Xm">
                        </ux:InputTextMask>
                    </Plugins>
                </ext:TextField>            
            </Items>
            <Buttons>
                <ext:Button ID="btn1" runat="server" Text="click">
                    <Listeners>
                        <Click Handler="markReadOnly(#{gfeDueField})" />
                    </Listeners>
                </ext:Button>
            </Buttons>
        </ext:Panel>
    </div>
    <script type="text/javascript">
        var markReadOnly = function (fld) {
            fld.setReadOnly(true);
        }
    </script>

    </form>
</body>
</html>
    Last edited by Daniil; Dec 20, 2011 at 5:47 PM. Reason: [CLOSED]
  2. #2
    Dec 20, 2011, 9:03 AM
    Hi,

    Yes, the setReadOnly method knows nothing about the InputTextMask plugin.

    I can suggest the following solution.

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

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


<!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>

    <script type="text/javascript">
        var destroyMaskPlugin = function (maskPlugin) {
            var field = maskPlugin.field;
            field.un('render', maskPlugin.assignEl, maskPlugin);
            field.un('blur', maskPlugin.removeValueWhenInvalid, maskPlugin);
            field.un('focus', maskPlugin.processMaskFocus, maskPlugin);
      
           if (Ext.isArray(field.plugins)) {
                field.plugins.remove(maskPlugin);
            } else {
                field.plugins = null;
            }
     
            field.getEl().purgeAllListeners();
            field.initEvents();
        };
      
        var addMask = function (field, cfg) {
            var mask = new Ext.ux.netbox.InputTextMask(cfg);
            field.plugins = mask;
            mask.init(field);
        };

        var toggleReadOnly = function (field) {
            var readOnly = field.readOnly;

            if (readOnly) {
                field.setReadOnly(false);
                addMask(field, { mask : "99:99" });
            } else {
                field.setReadOnly(true);
                destroyMaskPlugin(field.plugins);
            }
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:TextField ID="TextField1" runat="server">
            <Plugins>
                <ux:InputTextMask ID="InputTextMask1" runat="server" Mask="99:99" />
            </Plugins>
        </ext:TextField>
        <ext:Button runat="server" Text="Toggle read-only">
            <Listeners>
                <Click Handler="toggleReadOnly(TextField1);" />
            </Listeners>
        </ext:Button>
    </form>
</body>
</html>
  3. #3
    Dec 20, 2011, 5:11 PM
    Thanks :)
    Mark this as solved.

Similar Threads

  1. [CLOSED] Mark a FormPanel as no longer dirty?
    By dmoore in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 23, 2012, 7:57 PM
  2. How to Mark Ext.net 2.0 FormPanel as Valid?
    By NickBin in forum 2.x Help
    Replies: 1
    Last Post: Mar 22, 2012, 12:33 PM
  3. [CLOSED] The red mark of the TextField controls that AllowBlank="False" disapear after updating Coolite version 1.0.0 from SVN today
    By flormariafr in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Jun 25, 2010, 2:53 PM
  4. Can't read value from disabled textfield
    By Ares in forum 1.x Help
    Replies: 4
    Last Post: Jul 01, 2009, 5:33 PM
  5. Gridpanel mark the value of a cell
    By mirroras in forum 1.x Help
    Replies: 0
    Last Post: May 29, 2009, 4:55 AM

Tags for this Thread

Posting Permissions