[CLOSED] [#488] [#499] Can't create a Field with mask Disabled

Page 1 of 2 12 LastLast
  1. #1

    [CLOSED] [#488] [#499] Can't create a Field with mask Disabled

    In 2013, i posted a thread regarding remove TextField's InputMask: http://forums.ext.net/showthread.php...d-s-Input-Mask

    The given solution was enabling / disabling the InputMask.

    But at this moment i am trying to add a disabled InputMask, with no initial mask, as shown below:

    <ext:TextField ID="TextField1" runat="server">
        <Plugins>
            <ext:InputMask ID="Mask1" runat="server" Mask="" Enabled="false" />
        </Plugins>
    </ext:TextField>
    By doing so, i get the following error:



    It's possible to overcome this issue by doing the following:

    <script type="text/javascript">
        Ext.net.InputMask.override({
            setMask: function (mask) {
                debugger;
    
                if (arguments[0] == undefined) {
                    arguments[0] = "";
                }
    
                this.callParent(arguments);
            }
        });
    </script>
    The code above sets the mask to "" when it equals undefined.

    In my opinion, the InputMask should not try to call setMask, since it is disabled. Going further, it should not throw an error when the mask is set to undefined, since it's trying to access a member of a null instance (should evaluate whether the mask is null).

    Thanks in advance
    Last edited by Daniil; Sep 29, 2014 at 3:41 PM. Reason: [CLOSED]
  2. #2
    Hi Raphael,

    Thank you for the report. Created an Issue:
    https://github.com/extnet/Ext.NET/issues/488

    It has been fixed in the revision #5835.

    Btw, please use Disabled="true" instead of Enabled="false".
  3. #3
    Thank you Daniil. Please mark this thread as closed.
  4. #4
    Quote Originally Posted by Daniil View Post
    Hi Raphael,

    Thank you for the report. Created an Issue:
    https://github.com/extnet/Ext.NET/issues/488

    It has been fixed in the revision #5835.

    Btw, please use Disabled="true" instead of Enabled="false".
    On my previous post i asked for you mark this thread as closed but i only was able to test the solution provided by you at this time. Unfortunately i had no success since i was not able to find InputMask's Disable property, as shown below:

    TextField TextField1 = new TextField { ID = "TextField1" };
    TextField1.Plugins.Add(new InputMask { ID = "Mask1", Mask = "", Disabled = true });
    Attachment 11711
  5. #5
    Indeed. Thank for pointing that out. I've created an Issue and we will fix shortly.
    https://github.com/extnet/Ext.NET/issues/499

    As a workaround please use an InputMask's CustomConfig.
  6. #6
    There were a few problems more. I've committed the fix in the revision #5861. Could you, please, let me know it works well for you now or not?
  7. #7
    Thank you for the fix Daniil. Unfortunately it did not solved my problem.

    In my scenario the field is required to have the standard behaviour initially, then change to the behaviour of a masked field when the mask is enabled, then change back to the standard behaviour when the mask is disabled.

    In the following example we are able to identify a couple of scenarios that show that the TextField's standard behaviour is not equal to the TextField's behavior after enabling and disabling its mask:
    <html>
    <head runat="server">
        <title>Mask Example</title>
        <script type="text/javascript">
    
            var ValidadeForm = function () {
    
                var fields = App.FormPanel1.form.getFields().items;
                var firstInvalid = undefined;
    
                for (var i = 0; i < fields.length; i++) {
    
                    if (!fields[i].validate() && firstInvalid === undefined) {
                        firstInvalid = fields[i];
                    }
                }
    
                if (firstInvalid !== undefined) {
                    firstInvalid.focus();
                }
            }
    
            var EnableAndDisableTheMaskOnTheTextField3And4 = function () {
    
                App.InputMask3.enable();
                App.InputMask3.disable();
    
                App.InputMask4.enable();
                App.InputMask4.disable();
            }
    
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" SeparateUIStyles="false" Theme="Gray" ScriptMode="Development" />
        <br />
        <ext:Button Text="Step #1: Validade Form!" runat="server">
            <Listeners>
                <Click Handler="ValidadeForm();" />
            </Listeners>
        </ext:Button>
        <br />
        <ext:Button Text="Step #2: Enable and Disable the Mask on the TextField #3 and #4!"
            runat="server">
            <Listeners>
                <Click Handler="EnableAndDisableTheMaskOnTheTextField3And4();" />
            </Listeners>
        </ext:Button>
        <br />
        <ext:FormPanel ID="FormPanel1" runat="server">
            <Items>
                <ext:TextField ID="TextField1" runat="server" AllowBlank="false" FieldLabel="TextField #1"
                    Text="Test Text">
                    <Plugins>
                        <ext:InputMask ID="InputMask1" runat="server" Mask="" Disabled="true" />
                    </Plugins>
                </ext:TextField>
                <ext:TextField ID="TextField2" runat="server" AllowBlank="false" FieldLabel="TextField #2">
                    <Plugins>
                        <ext:InputMask ID="InputMask2" runat="server" Mask="" Disabled="true" />
                    </Plugins>
                </ext:TextField>
                <ext:TextField ID="TextField3" runat="server" AllowBlank="false" FieldLabel="TextField #3"
                    Text="Test Text">
                    <Plugins>
                        <ext:InputMask ID="InputMask3" runat="server" Mask="" Disabled="true" />
                    </Plugins>
                </ext:TextField>
                <ext:TextField ID="TextField4" runat="server" AllowBlank="false" FieldLabel="TextField #4">
                    <Plugins>
                        <ext:InputMask ID="InputMask4" runat="server" Mask="" Disabled="true" />
                    </Plugins>
                </ext:TextField>
            </Items>
        </ext:FormPanel>
    </body>
    </html>



    Step #0: Open page:
    At this moment, all the TextField's have the same behaviour but the TextFields' #1 and #3 have text while TextFields' #2 and #4 haven't.

    Step #1: Click the button Step #1: Validade Form!. It validates all the TextField's and set the focus on the first TextField that is invalid, in this case, the TextField #2, as shown below:
    Attachment 12161

    Up to this point, everything worked as expected.



    Step #2: click the button Step #2: Enable and Disable the Mask on the TextField #3 and #4!. It enables and then disables the mask of TextFields' #3 and #4
    Attachment 12171

    At this moment the TextFields' #3 and #4 start to behave wrongly



    Step #3: Write some text in TextFields' #3 and #4
    Attachment 12181

    The TextField #4 should not be displaying the "Required Field" message.



    Step #4: Delete tht text of TextFields' #3 and #4
    Attachment 12191

    The TextField #3 should be displaying the "Required Field" message.



    Step #5: Write some text in TextFields' #2, then click on the button Step #1: Validade Form!.
    Attachment 12201

    The focus is set to TextField #3, which means that the field is invalid, but the red border that indicates that the Field is invalid does not appear.



    I don't think that this is the expected behavior for this field.

    Additional information: As far as I debugged, the problem is because of the value of the 'preventMark' property of the field. It is set to 'true' in the '.enable()' and it is not set back to 'false' in the '.disable()'.

    PS.: When i downloaded the revision #5861 the Ext.Net.dll had version 2.5.2.16058. But when i downloaded the revision #5856 before that the Ext.Net.dll had the version 2.5.2.18031. Are you knowledge of this?
    Last edited by RCN; Jun 05, 2014 at 8:28 PM.
  8. #8
    Quote Originally Posted by RCN View Post
    I don't think that this is the expected behavior for this field.
    Absolutely.

    Quote Originally Posted by RCN View Post
    Additional information: As far as I debugged, the problem is because of the value of the 'preventMark' property of the field. It is set to 'true' in the '.enable()' and it is not set back to 'false' in the '.disable()'.
    Thank you for your investigation! It nice to deal with you, as usual. Yes, I think you are right, it is because of the preventMark property.

    Please try this override.

    Fix
    Ext.net.InputMask.override({
        disable: function () {
            if (this.disabled) {
                return;
            }
    
            this.callParent(arguments);
    
            var field = this.getCmp();
    
            field.blur();
            this.unmask();
    
            if (this.originBeginLayout) {
                field.getComponentLayout().beginLayout = this.originBeginLayout;
            }
    
            if (field.rendered) {
                field.mun(field.inputEl, {
                    scope: field,
                    keyup: field.onKeyUp,
                    keydown: field.onKeyDown,
                    keypress: field.onKeyPress
                });
            }
    
            field.un("focus", this.onFocus, this);
            field.un("blur", this.onBlur, this);
            field.un("keydown", this.onKeyDown, this);
            field.un("keypress", this.onKeyPress, this);
    
            if (this.rendered) {
                this.getCmp().inputEl.un((Ext.isIE ? "paste" : "input"), this.pasteHandler, this);
            } else {
                field.un("afterrender", this.initPasteEvent, this);
            }
    
            if (this.fieldGetErrors) {
                field.getErrors = this.fieldGetErrors;
            }
    
            field.preventMark = field.originalPreventMark;
        },
    
        clearInitError : function () {
            var me = this,
                field = me.getCmp(),
                layout = field.getComponentLayout(),
                originFn = layout.beginLayout;
    
            this.originBeginLayout = originFn;
    
            if (!field.preventMark) {
                field.originalPreventMark = field.preventMark;
                field.preventMark = true;
                me.clearPreventMark = true;
    
                layout.beginLayout = function (ownerContext) {
                    if(me.clearPreventMark) {
                       field.preventMark = false;    
                       originFn.call(layout, ownerContext);
                       field.preventMark = true;  
                    }
                    else{
                        originFn.call(layout, ownerContext);
                    }
                };
            }
        }
    });

    Quote Originally Posted by RCN View Post
    PS.: When i downloaded the revision #5861 the Ext.Net.dll had version 2.5.2.16058. But when i downloaded the revision #5856 before that the Ext.Net.dll had the version 2.5.2.18031. Are you knowledge of this?
    Do you mean that last numbers became lower? Well, they doesn't mean real version, it is a revision and it depends on time of a actual build.
    http://blogs.msdn.com/b/carloc/archi...-assembly.aspx
  9. #9
    I will try apply the fix provided above and be sure that i'll keep you posted.

    Once again, thank you Daniil
  10. #10
    The fix worked perfectly in the last posted example but my real-world scenario is a bit more complicated than that.
    In my scenario the field is dynamically rendered in the page. I tried to apply the fix without success.

    Here's another example showing the limitations i experienced:

    Controller:
            public ActionResult Index()
            {
                TextField TextField1 = new TextField { ID = "TextField1", AllowBlank = false, FieldLabel = "Field" };
                TextField1.Plugins.Add(new InputMask { ID = "Mask1", Mask = "", Disabled = true });
    
                ViewBag.ControlConfig = ComponentLoader.ToConfig(TextField1);
    
                return View();
            }
    View:
    <%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
    
    <% ResourceManager.RegisterControlResources<InputMask>(); %>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Mask Example</title>
        <script type="text/javascript">
    
            Ext.net.InputMask.override({
                disable: function () {
                    if (this.disabled) {
                        return;
                    }
    
                    this.callParent(arguments);
    
                    var field = this.getCmp();
    
                    field.blur();
                    this.unmask();
    
                    if (this.originBeginLayout) {
                        field.getComponentLayout().beginLayout = this.originBeginLayout;
                    }
    
                    if (field.rendered) {
                        field.mun(field.inputEl, {
                            scope: field,
                            keyup: field.onKeyUp,
                            keydown: field.onKeyDown,
                            keypress: field.onKeyPress
                        });
                    }
    
                    field.un("focus", this.onFocus, this);
                    field.un("blur", this.onBlur, this);
                    field.un("keydown", this.onKeyDown, this);
                    field.un("keypress", this.onKeyPress, this);
    
                    if (this.rendered) {
                        this.getCmp().inputEl.un((Ext.isIE ? "paste" : "input"), this.pasteHandler, this);
                    } else {
                        field.un("afterrender", this.initPasteEvent, this);
                    }
    
                    if (this.fieldGetErrors) {
                        field.getErrors = this.fieldGetErrors;
                    }
    
                    field.preventMark = field.originalPreventMark;
                },
    
                clearInitError: function () {
                    var me = this,
                field = me.getCmp(),
                layout = field.getComponentLayout(),
                originFn = layout.beginLayout;
    
                    this.originBeginLayout = originFn;
    
                    if (!field.preventMark) {
                        field.originalPreventMark = field.preventMark;
                        field.preventMark = true;
                        me.clearPreventMark = true;
    
                        layout.beginLayout = function (ownerContext) {
                            if (me.clearPreventMark) {
                                field.preventMark = false;
                                originFn.call(layout, ownerContext);
                                field.preventMark = true;
                            }
                            else {
                                originFn.call(layout, ownerContext);
                            }
                        };
                    }
                }
            });
    
            var RenderControl = function () {
    
                var control = App._hdnControlConfig.value;
    
                control = Ext.decode(control, true);
    
                var config = control;
    
                if (config && config['x.res']) {
    
                    control = Ext.decode(config.config, true);
    
                    Ext.net.ResourceMgr.load(config['x.res'].res, function () {
                        Ext.callback(AddControlToForm, this, [control]);
                    });
                }
            }
    
            var AddControlToForm = function (control) {
    
                App.FormPanel1.add(control);
            }
    
            var ValidadeForm = function () {
    
                var fields = App.FormPanel1.form.getFields().items;
                var firstInvalid = undefined;
    
                for (var i = 0; i < fields.length; i++) {
    
                    if (!fields[i].validate() && firstInvalid === undefined) {
                        firstInvalid = fields[i];
                    }
                }
    
                if (firstInvalid !== undefined) {
                    firstInvalid.focus();
                }
            }
    
            var EnableAndDisableTheMask = function () {
    
                if (App.Mask1) {
    
                    App.Mask1.enable();
                    App.Mask1.disable();
                }
            }
    
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" SeparateUIStyles="false" Theme="Gray" ScriptMode="Development" />
        <ext:Hidden ID="_hdnControlConfig" Text="<%# ViewBag.ControlConfig %>" AutoDataBind="true"
            runat="server" />
        <br />
        <ext:Button Text="Step #1: Render the control into the Form." runat="server">
            <Listeners>
                <Click Handler="RenderControl();" />
            </Listeners>
        </ext:Button>
        <br />
        <ext:Button Text="Step #2: Enable and Disable the Mask on the rendered TextField."
            runat="server">
            <Listeners>
                <Click Handler="EnableAndDisableTheMask();" />
            </Listeners>
        </ext:Button>
        <br />
        <ext:Button Text="Step #3: Validade Form!" runat="server">
            <Listeners>
                <Click Handler="ValidadeForm();" />
            </Listeners>
        </ext:Button>
        <ext:Label Text="(After this, the Required Field validation should turn the
            field to red, because there's no text on it and the AllowBlank property is set to
            false)" StyleSpec="color: Red;" runat="server"/>
        <br />
        <br />
        <ext:FormPanel ID="FormPanel1" runat="server">
            <Items>
            </Items>
        </ext:FormPanel>
    </body>
    </html>

    In the example provided about the disable and clearInitError methods are not hit, as they are, in the "normal" scenario.

    Can anyone assist me to overcome this issue?

    Thanks in advance
Page 1 of 2 12 LastLast

Similar Threads

  1. Replies: 0
    Last Post: Dec 09, 2013, 1:47 PM
  2. [CLOSED] Set a message on a disabled panel mask
    By Fergus in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Sep 02, 2013, 3:34 PM
  3. [CLOSED] Make disabled=true field font black
    By Pablo_Azevedo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 17, 2011, 11:43 AM
  4. Replies: 0
    Last Post: Jul 26, 2010, 10:09 AM
  5. [CLOSED] Date field mask validation
    By majestic in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Nov 27, 2009, 7:16 AM

Tags for this Thread

Posting Permissions