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

**Daniil** · Jun 16, 2014, 1:49 PM

Originally Posted by RCN

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

Hmm, I've put "alert" calls into both the methods. The alert boxes appear for both.

Could you, please, post the Page Sources (HTML rendered to the browser)?

**RCN** · Jun 16, 2014, 6:39 PM

Hmm, Weird.

Source before any clicks:

<html class="x-strict x-theme-gray">

<head>
    <link id="ext-theme" href="/extjs/resources/ext_theme_gray/ext-theme-gray-all-debug-embedded-css/ext.axd?v=16058" rel="stylesheet" type="text/css">
    <link id="extnet-styles" href="/extnet/resources/css/extnet-all-debug-embedded-css/ext.axd?v=16058" rel="stylesheet" type="text/css">
    <script src="/extjs/ext-all-dev-js/ext.axd?v=16058" type="text/javascript"></script>
    <script src="/extnet/extnet-all-debug-js/ext.axd?v=16058" type="text/javascript"></script>
    <style id="extnet-resources" type="text/css">
    </style>
    <script src="/extnet/locale/ext-lang-pt-BR-js/ext.axd?v=16058" type="text/javascript"></script>
    <script src="/ux/inputmask/inputmask-debug-js/ext.axd?v=16058" type="text/javascript"></script>
    <title>
        Mask Example
    </title>
    <script type="text/javascript">
        Ext.net.InputMask.override({
            disable: function () {
                alert('test');
                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 () {
                alert('test');
                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>

    <script type="text/javascript">
        //<![CDATA[
        Ext.net.ResourceMgr.init({
            id: "ctl01",
            isMVC: true,
            theme: "gray"
        });
        Ext.onReady(function () {
            Ext.create("Ext.form.field.Hidden", {
                id: "_hdnControlConfig",
                renderTo: "App._hdnControlConfig_Container",
                value: "{'x.res':{res:[{url:\"/ux/inputmask/inputmask-js/ext.axd?v=16058\"}]},config:\"[{\\\"id\\\":\\\"TextField1\\\",\\\"plugins\\\":[{\\\"proxyId\\\":\\\"Mask1\\\",\\\"ptype\\\":\\\"inputmask\\\",\\\"disabled\\\":true}],\\\"xtype\\\":\\\"textfield\\\",\\\"fieldLabel\\\":\\\"Field\\\",\\\"allowBlank\\\":false}]\"}"
            });
            Ext.create("Ext.button.Button", {
                renderTo: "App.ctl02_Container",
                text: "Step #1: Render the control into the Form.",
                listeners: {
                    click: {
                        fn: function (item, e) {
                            RenderControl();
                        }
                    }
                }
            });
            Ext.create("Ext.button.Button", {
                renderTo: "App.ctl03_Container",
                text: "Step #2: Enable and Disable the Mask on the rendered TextField.",
                listeners: {
                    click: {
                        fn: function (item, e) {
                            EnableAndDisableTheMask();
                        }
                    }
                }
            });
            Ext.create("Ext.button.Button", {
                renderTo: "App.ctl04_Container",
                text: "Step #3: Validade Form!",
                listeners: {
                    click: {
                        fn: function (item, e) {
                            ValidadeForm();
                        }
                    }
                }
            });
            Ext.create("Ext.net.Label", {
                renderTo: "App.ctl05_Container",
                style: "color: Red;",
                text: "(After this, the Required Field validation should turn the\r\n        field to red, because there's no text on it and the AllowBlank property is set to\r\n        false)"
            });
            Ext.create("Ext.form.Panel", {
                id: "FormPanel1",
                renderTo: "App.FormPanel1_Container",
                waitMsgTarget: ""
            });
        });
         //]]>
    </script>
</head>

<body class="x-body x-ie10 x-nlg" id="ext-gen1018">

    <div id="App._hdnControlConfig_Container">
        <input name="_hdnControlConfig" class="x-form-hidden" id="_hdnControlConfig" style="display: none;" type="hidden" value="{'x.res':{res:[{url:&quot;/ux/inputmask/inputmask-js/ext.axd?v=16058&quot;}]},config:&quot;[{\&quot;id\&quot;:\&quot;TextField1\&quot;,\&quot;plugins\&quot;:[{\&quot;proxyId\&quot;:\&quot;Mask1\&quot;,\&quot;ptype\&quot;:\&quot;inputmask\&quot;,\&quot;disabled\&quot;:true}],\&quot;xtype\&quot;:\&quot;textfield\&quot;,\&quot;fieldLabel\&quot;:\&quot;Field\&quot;,\&quot;allowBlank\&quot;:false}]&quot;}">
    </div>
    <br>
    <div id="App.ctl02_Container"><a tabindex="0" class="x-btn x-unselectable x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon x-border-box" id="button-1009" role="button" hidefocus="on" unselectable="on"><span class="x-btn-wrap" id="button-1009-btnWrap" unselectable="on"><span class="x-btn-button" id="button-1009-btnEl"><span class="x-btn-inner x-btn-inner-center" id="button-1009-btnInnerEl" unselectable="on">Step #1: Render the control into the Form.</span><span class="x-btn-icon-el  " id="button-1009-btnIconEl" role="img" unselectable="on"></span></span></span></a>
    </div>
    <br>
    <div id="App.ctl03_Container"><a tabindex="0" class="x-btn x-unselectable x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon x-border-box" id="button-1010" role="button" hidefocus="on" unselectable="on"><span class="x-btn-wrap" id="button-1010-btnWrap" unselectable="on"><span class="x-btn-button" id="button-1010-btnEl"><span class="x-btn-inner x-btn-inner-center" id="button-1010-btnInnerEl" unselectable="on">Step #2: Enable and Disable the Mask on the rendered TextField.</span><span class="x-btn-icon-el  " id="button-1010-btnIconEl" role="img" unselectable="on"></span></span></span></a>
    </div>
    <br>
    <div id="App.ctl04_Container"><a tabindex="0" class="x-btn x-unselectable x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon x-border-box" id="button-1011" role="button" hidefocus="on" unselectable="on"><span class="x-btn-wrap" id="button-1011-btnWrap" unselectable="on"><span class="x-btn-button" id="button-1011-btnEl"><span class="x-btn-inner x-btn-inner-center" id="button-1011-btnInnerEl" unselectable="on">Step #3: Validade Form!</span><span class="x-btn-icon-el  " id="button-1011-btnIconEl" role="img" unselectable="on"></span></span></span></a>
    </div>
    <div id="App.ctl05_Container" style="display: inline;">
        <label class="x-label x-label-default x-border-box" id="netlabel-1012" style="color: red;" for="">
            <img class="x-label-icon" id="ext-gen1031" style="display: none;" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="><span class="x-label-value" id="ext-gen1032">(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)</span>
        </label>
    </div>
    <br>
    <br>
    <div id="App.FormPanel1_Container">
        <div class="x-panel x-panel-default x-border-box" id="FormPanel1" style="height: 2px;">
            <div class="x-panel-body x-panel-body-default x-panel-body-default" id="FormPanel1-body" style="left: 0px; top: 0px; width: 1920px; height: 2px;"><span id="FormPanel1-outerCt" style="width: 100%; display: table; table-layout: fixed;"><div id="FormPanel1-innerCt" style="height: 100%; vertical-align: top; display: table-cell;"></div></span>
            </div>
        </div>
    </div>


    <div class="x-tip x-layer x-tip-default x-border-box" id="ext-quicktips-tip" style="display: none;">
        <div class="x-tip-header x-header x-header-horizontal x-docked x-unselectable x-tip-header-default x-horizontal x-tip-header-horizontal x-tip-header-default-horizontal x-top x-tip-header-top x-tip-header-default-top x-docked-top x-tip-header-docked-top x-tip-header-default-docked-top" id="ext-quicktips-tip_header">
            <div class="x-header-body x-tip-header-body x-tip-header-body-default x-tip-header-body-horizontal x-tip-header-body-default-horizontal x-tip-header-body-top x-tip-header-body-default-top x-tip-header-body-docked-top x-tip-header-body-default-docked-top x-box-layout-ct x-tip-header-body-default-horizontal x-tip-header-body-default-top x-tip-header-body-default-docked-top" id="ext-quicktips-tip_header-body">
                <div class="x-box-inner " id="ext-quicktips-tip_header-innerCt" role="presentation">
                    <div class="x-box-target" id="ext-quicktips-tip_header-targetEl">
                        <div class="x-component x-header-text-container x-tip-header-text-container x-tip-header-text-container-default x-box-item x-component-default" id="ext-quicktips-tip_header_hd" unselectable="on"><span class="x-header-text x-tip-header-text x-tip-header-text-default" id="ext-quicktips-tip_header_hd-textEl" unselectable="on">&nbsp;</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="x-tip-body x-tip-body-default x-tip-body-default" id="ext-quicktips-tip-body"><span id="ext-quicktips-tip-outerCt" style="display: table;"><div id="ext-quicktips-tip-innerCt" style="height: 100%; vertical-align: top; display: table-cell;"></div></span>
        </div>
        <div class="x-tip-anchor x-tip-anchor-top" id="ext-gen1024"></div>
    </div>
</body>

</html>

Source after the button clicks:

<html class="x-strict x-theme-gray">

<head>
    <link id="ext-theme" href="/extjs/resources/ext_theme_gray/ext-theme-gray-all-debug-embedded-css/ext.axd?v=16058" rel="stylesheet" type="text/css">
    <link id="extnet-styles" href="/extnet/resources/css/extnet-all-debug-embedded-css/ext.axd?v=16058" rel="stylesheet" type="text/css">
    <script src="/extjs/ext-all-dev-js/ext.axd?v=16058" type="text/javascript"></script>
    <script src="/extnet/extnet-all-debug-js/ext.axd?v=16058" type="text/javascript"></script>
    <style id="extnet-resources" type="text/css">
    </style>
    <script src="/extnet/locale/ext-lang-pt-BR-js/ext.axd?v=16058" type="text/javascript"></script>
    <script src="/ux/inputmask/inputmask-debug-js/ext.axd?v=16058" type="text/javascript"></script>
    <title>
        Mask Example
    </title>
    <script type="text/javascript">
        Ext.net.InputMask.override({
            disable: function () {
                alert('test');
                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 () {
                alert('test');
                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>

    <script type="text/javascript">
        //<![CDATA[
        Ext.net.ResourceMgr.init({
            id: "ctl01",
            isMVC: true,
            theme: "gray"
        });
        Ext.onReady(function () {
            Ext.create("Ext.form.field.Hidden", {
                id: "_hdnControlConfig",
                renderTo: "App._hdnControlConfig_Container",
                value: "{'x.res':{res:[{url:\"/ux/inputmask/inputmask-js/ext.axd?v=16058\"}]},config:\"[{\\\"id\\\":\\\"TextField1\\\",\\\"plugins\\\":[{\\\"proxyId\\\":\\\"Mask1\\\",\\\"ptype\\\":\\\"inputmask\\\",\\\"disabled\\\":true}],\\\"xtype\\\":\\\"textfield\\\",\\\"fieldLabel\\\":\\\"Field\\\",\\\"allowBlank\\\":false}]\"}"
            });
            Ext.create("Ext.button.Button", {
                renderTo: "App.ctl02_Container",
                text: "Step #1: Render the control into the Form.",
                listeners: {
                    click: {
                        fn: function (item, e) {
                            RenderControl();
                        }
                    }
                }
            });
            Ext.create("Ext.button.Button", {
                renderTo: "App.ctl03_Container",
                text: "Step #2: Enable and Disable the Mask on the rendered TextField.",
                listeners: {
                    click: {
                        fn: function (item, e) {
                            EnableAndDisableTheMask();
                        }
                    }
                }
            });
            Ext.create("Ext.button.Button", {
                renderTo: "App.ctl04_Container",
                text: "Step #3: Validade Form!",
                listeners: {
                    click: {
                        fn: function (item, e) {
                            ValidadeForm();
                        }
                    }
                }
            });
            Ext.create("Ext.net.Label", {
                renderTo: "App.ctl05_Container",
                style: "color: Red;",
                text: "(After this, the Required Field validation should turn the\r\n        field to red, because there's no text on it and the AllowBlank property is set to\r\n        false)"
            });
            Ext.create("Ext.form.Panel", {
                id: "FormPanel1",
                renderTo: "App.FormPanel1_Container",
                waitMsgTarget: ""
            });
        });
         //]]>
    </script>
    <script type="text/javascript">
        /*
         * @version   : 2.5.2 - Ext.NET Pro License
         * @author    : Ext.NET, Inc. http://www.ext.net/
         * @date      : 2014-05-22
         * @copyright : Copyright (c) 2008-2014, Ext.NET, Inc. (http://www.ext.net/). All rights reserved.
         * @license   : See license.txt and http://www.ext.net/license/.
         */


        Ext.define('Ext.net.InputMask', {
            extend: 'Ext.AbstractPlugin',
            alias: 'plugin.inputmask',
            defaultMaskSymbols: {
                "9": "[0-9]",
                "a": "[A-Za-z]",
                "*": "[A-Za-z0-9]"
            },
            placeholder: "_",
            alwaysShow: false,
            clearWhenInvalid: true,
            allowInvalid: false,
            invalidMaskText: "",
            unmaskOnBlur: false,
            init: function (field) {
                this.callParent(arguments);
                this.ignoreChange = 0;
                this.maskSymbols = Ext.applyIf(this.maskSymbols || {}, this.defaultMaskSymbols);
                this.removeEmptyMaskSymbols();
                this.getCmp().inputMask = this;
                this.notEnabled = true;
                if (!this.disabled) {
                    this.enable();
                }
            },
            enable: function () {
                if (!this.notEnabled && !this.disabled) {
                    return;
                }
                this.notEnabled = false;
                this.callParent(arguments);
                var field = this.getCmp();
                field.blur();
                field.enableKeyEvents = true;
                if (field.rendered) {
                    field.mon(field.inputEl, {
                        scope: field,
                        keyup: field.onKeyUp,
                        keydown: field.onKeyDown,
                        keypress: field.onKeyPress
                    });
                }
                this.clearInitError();
                field.on("focus", this.onFocus, this);
                field.on("blur", this.onBlur, this);
                field.on("keydown", this.onKeyDown, this);
                field.on("keypress", this.onKeyPress, this);
                field.on("change", this.checkEmptyField, this);
                if (this.rendered) {
                    this.initPasteEvent();
                } else {
                    field.on("afterrender", this.initPasteEvent, this, {
                        single: true
                    });
                }
                if (!this.allowInvalid) {
                    this.fieldGetErrors = field.getErrors;
                    field.getErrors = Ext.Function.bind(this.getErrors, this);
                }
                this.setMask(this.mask);
            },
            checkEmptyField: function (field, newValue, oldValue) {
                if (this.unmasked || this.ignoreChange) {
                    return;
                }
                if (Ext.isEmpty(newValue)) {
                    this.clearBuffer(0, this.maskLength);
                    if (field.hasFocus || (!field.hasFocus && this.alwaysShow)) {
                        this.writeBuffer();
                    }
                    if (field.hasFocus) {
                        this.moveCaret(0);
                    }
                }
            },
            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;
                }
            },
            clearInitError: function () {
                var me = this,
                    field = me.getCmp(),
                    layout = field.getComponentLayout(),
                    originFn = layout.beginLayout;
                this.originBeginLayout = originFn;
                if (!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);
                        }
                    };
                }
            },
            getErrors: function () {
                var field = this.getCmp(),
                    errors = this.fieldGetErrors.call(field, field.processRawValue(field.getRawValue()));
                if (!this.isValueValid()) {
                    errors.push(this.invalidMaskText || field.invalidText);
                }
                return errors;
            },
            initPasteEvent: function () {
                this.getCmp().inputEl.on((Ext.isIE ? "paste" : "input"), this.pasteHandler, this, {
                    delay: 1
                });
            },
            pasteHandler: function () {
                if (this.unmasked) {
                    return;
                }
                var pos = this.validateMask(true);
                this.getCmp().selectText(pos, pos);
            },
            onFocus: function (field) {
                if (this.clearPreventMark) {
                    Ext.Function.defer(function () {
                        this.getCmp().preventMark = false;
                        delete this.clearPreventMark;
                    }, 1, this);
                }
                if (this.unmaskOnBlur) {
                    this.setMask(this.mask);
                }
                if (this.unmasked) {
                    return;
                }
                if (!this.alwaysShow) {
                    this.focusText = field.getValue();
                    var pos = this.validateMask();
                    this.writeBuffer();
                    if (Ext.isIE) {
                        this.moveCaret(pos);
                    } else {
                        Ext.Function.defer(this.moveCaret, 1, this, [pos]);
                    }
                }
            },
            onBlur: function () {
                if (this.unmasked) {
                    return;
                }
                if (!this.alwaysShow) {
                    this.validateMask();
                } else if (this.clearWhenInvalid && !this.isValueValid()) {
                    this.ignoreChange++;
                    this.getCmp().setValue("");
                    this.clearBuffer(0, this.maskLength);
                    this.writeBuffer();
                    this.ignoreChange--;
                }
                if (this.unmaskOnBlur) {
                    if (!this.isValueValid()) {
                        this.unmasked = true;
                        this.ignoreChange++;
                        this.getCmp().setValue("");
                        this.clearBuffer(0, this.maskLength);
                        if (this.alwaysShow) {
                            this.writeBuffer();
                        }
                        this.ignoreChange--;
                    } else {
                        this.unmask();
                    }
                }
            },
            moveCaret: function (pos) {
                this.getCmp().selectText(pos == this.mask.length ? 0 : pos, pos);
            },
            removeEmptyMaskSymbols: function () {
                Ext.Object.each(this.maskSymbols, function (key, value) {
                    if (Ext.isEmpty(value)) {
                        delete this.maskSymbols[key];
                    }
                });
            },
            setMask: function (mask) {
                var field = this.getCmp();
                this.unmasked = false;
                if (!Ext.isString(mask)) {
                    mask = "";
                }
                this.mask = mask;
                this.regexes = [];
                this.placeholders = [];
                this.requiredPartEnd = mask.length;
                this.maskStart = null;
                this.maskLength = mask.length;
                this.focusText = field.getValue();
                Ext.each(mask.split(""), function (char, index) {
                    if (char == '?') {
                        this.maskLength--;
                        this.requiredPartEnd = index;
                    } else if (this.maskSymbols[char]) {
                        this.regexes.push(new RegExp(this.maskSymbols[char].regex || this.maskSymbols[char]));
                        this.placeholders.push(this.maskSymbols[char].placeholder || this.placeholder);
                        if (this.maskStart == null) {
                            this.maskStart = this.regexes.length - 1;
                        }
                    } else {
                        this.regexes.push(null);
                        this.placeholders.push(null);
                    }
                }, this);
                this.buffer = [];
                var i = 0,
                    char, array = this.mask.split(""),
                    len = array.length;
                for (; i < len; i++) {
                    char = array[i];
                    if (char != "?") {
                        this.buffer.push(this.maskSymbols[char] ? (this.maskSymbols[char].placeholder || this.placeholder) : char)
                    }
                }
                this.validateMask();
                if (this.alwaysShow) {
                    this.writeBuffer();
                }
            },
            getSelectedRange: function () {
                var caretPos = 0,
                    field = this.getCmp(),
                    dom = field.inputEl.dom,
                    sel;
                if (document.selection) {
                    var start = 0,
                        end = 0,
                        normalizedValue, textInputRange, len, endRange, range = document.selection.createRange();
                    if (range && range.parentElement() == dom) {
                        len = dom.value.length;
                        normalizedValue = dom.value.replace(/\r\n/g, "\n");
                        textInputRange = dom.createTextRange();
                        textInputRange.moveToBookmark(range.getBookmark());
                        endRange = dom.createTextRange();
                        endRange.collapse(false);
                        if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
                            start = end = len;
                        } else {
                            start = -textInputRange.moveStart("character", -len);
                            start += normalizedValue.slice(0, start).split("\n").length - 1;
                            if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
                                end = len;
                            } else {
                                end = -textInputRange.moveEnd("character", -len);
                                end += normalizedValue.slice(0, end).split("\n").length - 1;
                            }
                        }
                    }
                    caretPos = {
                        begin: start,
                        end: end
                    };
                } else if (dom.selectionStart || dom.selectionStart == '0') {
                    caretPos = {
                        begin: dom.selectionStart,
                        end: dom.selectionEnd
                    };
                }
                return caretPos;
            },
            seekNext: function (pos) {
                while (++pos <= this.maskLength && !this.regexes[pos]);
                return pos;
            },
            seekPrev: function (pos) {
                while (--pos >= 0 && !this.regexes[pos]);
                return pos;
            },
            shiftL: function (begin, end) {
                if (begin < 0) {
                    return;
                }
                for (var i = begin, j = this.seekNext(end); i < this.maskLength; i++) {
                    if (this.regexes[i]) {
                        if (j < this.maskLength && this.regexes[i].test(this.buffer[j])) {
                            this.buffer[i] = this.buffer[j];
                            this.buffer[j] = this.placeholders[j] || this.placeholder;
                        } else {
                            break;
                        }
                        j = this.seekNext(j);
                    }
                }
                this.writeBuffer();
                this.getCmp().selectText(Math.max(this.maskStart, begin), Math.max(this.maskStart, begin));
            },
            shiftR: function (pos) {
                for (var i = pos, c = this.placeholder; i < this.maskLength; i++) {
                    if (this.regexes[i]) {
                        var j = this.seekNext(i),
                            t = this.buffer[i];
                        this.buffer[i] = c;
                        if (j < this.maskLength && this.regexes[j].test(t)) {
                            c = t;
                        } else {
                            break;
                        }
                    }
                }
            },
            onKeyDown: function (field, e) {
                if (this.unmasked) {
                    return;
                }
                var key = e.getKey();
                if (key == e.BACKSPACE || key == e.DELETE) {
                    var pos = this.getSelectedRange(),
                        begin = pos.begin,
                        end = pos.end;
                    if (end - begin == 0) {
                        begin = key != e.DELETE ? this.seekPrev(begin) : (end = this.seekNext(begin - 1));
                        end = key == e.DELETE ? this.seekNext(end) : end;
                    }
                    this.clearBuffer(begin, end);
                    this.shiftL(begin, end - 1);
                    e.stopEvent();
                    return false;
                } else if (key == e.ESC) {
                    field.setValue(this.focusText);
                    field.selectText(0, this.validateMask());
                    e.stopEvent();
                    return false;
                }
            },
            onKeyPress: function (field, e) {
                if (e.ctrlKey && !e.altKey || this.unmasked) {
                    return;
                }
                var key = e.getKey(),
                    charCode = String.fromCharCode(e.getCharCode()),
                    p, next, pos = this.getSelectedRange();
                if ((Ext.isGecko || Ext.isOpera) && (e.isNavKeyPress() || key === e.BACKSPACE || (key === e.DELETE && e.button === -1))) {
                    return;
                }
                if ((!Ext.isGecko && !Ext.isOpera) && e.isSpecialKey() && !charCode) {
                    return;
                }
                if (key < 32) {
                    return;
                }
                if (key) {
                    if (pos.end - pos.begin != 0) {
                        this.clearBuffer(pos.begin, pos.end);
                        this.shiftL(pos.begin, pos.end - 1);
                    }
                    p = this.seekNext(pos.begin - 1);
                    if (p < this.maskLength) {
                        if (this.regexes[p].test(charCode)) {
                            this.shiftR(p);
                            this.buffer[p] = charCode;
                            this.writeBuffer();
                            next = this.seekNext(p);
                            field.selectText(next, next);
                        }
                    }
                    e.stopEvent();
                    return false;
                }
            },
            clearBuffer: function (start, end) {
                for (var i = start; i < end && i < this.maskLength; i++) {
                    if (this.regexes[i]) {
                        this.buffer[i] = this.placeholders[i];
                    }
                }
            },
            writeBuffer: function () {
                this.getCmp().setValue(this.buffer.join(''));
                return this.getCmp().getValue();
            },
            isValueValid: function () {
                var value = this.getCmp().getValue(),
                    valid = true,
                    lastMatch = -1,
                    i, c, pos;
                for (i = 0, pos = 0; i < this.maskLength; i++) {
                    if (this.regexes[i]) {
                        while (pos++ < this.regexes.length) {
                            c = value.charAt(pos - 1);
                            if (this.regexes[i].test(c)) {
                                lastMatch = i;
                                break;
                            }
                        }
                        if (pos > value.length) {
                            break;
                        }
                    } else if (this.buffer[i] == value.charAt(pos) && i != this.requiredPartEnd) {
                        pos++;
                        lastMatch = i;
                    }
                }
                if ((lastMatch + 1) < this.requiredPartEnd) {
                    valid = false;
                }
                return valid;
            },
            validateMask: function (allow) {
                var value = this.getCmp().getValue(),
                    lastMatch = -1,
                    i, c, pos;
                for (i = 0, pos = 0; i < this.maskLength; i++) {
                    if (this.regexes[i]) {
                        this.buffer[i] = this.placeholders[i];
                        while (pos++ < this.regexes.length) {
                            c = value.charAt(pos - 1);
                            if (this.regexes[i].test(c)) {
                                this.buffer[i] = c;
                                lastMatch = i;
                                break;
                            }
                        }
                        if (pos > value.length) {
                            break;
                        }
                    } else if (this.buffer[i] == value.charAt(pos) && i != this.requiredPartEnd) {
                        pos++;
                        lastMatch = i;
                    }
                }
                if (!allow && (lastMatch + 1) < this.requiredPartEnd) {
                    if (!this.alwaysShow) {
                        this.ignoreChange++;
                        this.getCmp().setValue("");
                        this.clearBuffer(0, this.maskLength);
                        this.ignoreChange--;
                    }
                } else if (allow || lastMatch + 1 >= this.requiredPartEnd) {
                    this.writeBuffer();
                    if (!allow) {
                        this.getCmp().setValue(this.getCmp().getValue().substring(0, lastMatch + 1));
                    }
                }
                return (this.requiredPartEnd ? i : this.maskStart);
            },
            getUnmaskedValue: function () {
                var i, c, placeholder, value = this.getCmp().getValue(),
                    uValue = [];
                for (i = 0; i < this.maskLength; i++) {
                    if (this.regexes[i]) {
                        c = value.charAt(i);
                        placeholder = this.placeholders[i];
                        if (c && c != placeholder) {
                            uValue.push(c);
                        }
                    }
                }
                return uValue.join("");
            },
            unmask: function () {
                this.unmasked = true;
                this.getCmp().setValue(this.getUnmaskedValue());
            }
        });
    </script>
</head>

<body class="x-body x-ie10 x-nlg" id="ext-gen1018">

    <div id="App._hdnControlConfig_Container">
        <input name="_hdnControlConfig" class="x-form-hidden" id="_hdnControlConfig" style="display: none;" type="hidden" value="{'x.res':{res:[{url:&quot;/ux/inputmask/inputmask-js/ext.axd?v=16058&quot;}]},config:&quot;[{\&quot;id\&quot;:\&quot;TextField1\&quot;,\&quot;plugins\&quot;:[{\&quot;proxyId\&quot;:\&quot;Mask1\&quot;,\&quot;ptype\&quot;:\&quot;inputmask\&quot;,\&quot;disabled\&quot;:true}],\&quot;xtype\&quot;:\&quot;textfield\&quot;,\&quot;fieldLabel\&quot;:\&quot;Field\&quot;,\&quot;allowBlank\&quot;:false}]&quot;}">
    </div>
    <br>
    <div id="App.ctl02_Container"><a tabindex="0" class="x-btn x-unselectable x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon x-border-box" id="button-1009" role="button" hidefocus="on" unselectable="on"><span class="x-btn-wrap" id="button-1009-btnWrap" unselectable="on"><span class="x-btn-button" id="button-1009-btnEl"><span class="x-btn-inner x-btn-inner-center" id="button-1009-btnInnerEl" unselectable="on">Step #1: Render the control into the Form.</span><span class="x-btn-icon-el  " id="button-1009-btnIconEl" role="img" unselectable="on"></span></span></span></a>
    </div>
    <br>
    <div id="App.ctl03_Container"><a tabindex="0" class="x-btn x-unselectable x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon x-border-box" id="button-1010" role="button" hidefocus="on" unselectable="on"><span class="x-btn-wrap" id="button-1010-btnWrap" unselectable="on"><span class="x-btn-button" id="button-1010-btnEl"><span class="x-btn-inner x-btn-inner-center" id="button-1010-btnInnerEl" unselectable="on">Step #2: Enable and Disable the Mask on the rendered TextField.</span><span class="x-btn-icon-el  " id="button-1010-btnIconEl" role="img" unselectable="on"></span></span></span></a>
    </div>
    <br>
    <div id="App.ctl04_Container"><a tabindex="0" class="x-btn x-unselectable x-btn-default-small x-noicon x-btn-noicon x-btn-default-small-noicon x-border-box" id="button-1011" role="button" hidefocus="on" unselectable="on"><span class="x-btn-wrap" id="button-1011-btnWrap" unselectable="on"><span class="x-btn-button" id="button-1011-btnEl"><span class="x-btn-inner x-btn-inner-center" id="button-1011-btnInnerEl" unselectable="on">Step #3: Validade Form!</span><span class="x-btn-icon-el  " id="button-1011-btnIconEl" role="img" unselectable="on"></span></span></span></a>
    </div>
    <div id="App.ctl05_Container" style="display: inline;">
        <label class="x-label x-label-default x-border-box" id="netlabel-1012" style="color: red;" for="">
            <img class="x-label-icon" id="ext-gen1031" style="display: none;" src="data:image/gif;base64,R0lGODlhAQABAID/AMDAwAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=="><span class="x-label-value" id="ext-gen1032">(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)</span>
        </label>
    </div>
    <br>
    <br>
    <div id="App.FormPanel1_Container">
        <div class="x-panel x-panel-default x-border-box" id="FormPanel1" style="height: 29px;">
            <div class="x-panel-body x-panel-body-default x-panel-body-default" id="FormPanel1-body" style="left: 0px; top: 0px; width: 1920px; height: 29px;"><span id="FormPanel1-outerCt" style="width: 100%; display: table; table-layout: fixed;"><div id="FormPanel1-innerCt" style="height: 100%; vertical-align: top; display: table-cell;"><table class="x-field x-table-plain x-form-item x-form-type-text x-field-default x-anchor-form-item" id="TextField1" style="table-layout: fixed;" cellpadding="0"><tbody><tr class="x-form-item-input-row" id="TextField1-inputRow" role="presentation"><td width="105" class="x-field-label-cell" id="TextField1-labelCell" role="presentation" valign="top" halign="left"><label class="x-form-item-label x-unselectable x-form-item-label-left" id="TextField1-labelEl" style="width: 100px; margin-right: 5px;" for="TextField1-inputEl" unselectable="on">Field:</label></td><td class="x-form-item-body  " id="TextField1-bodyEl" role="presentation" style="width: 150px;"><input name="TextField1" class="x-form-field x-form-required-field x-form-text" id="TextField1-inputEl" aria-invalid="false" style="width: 100%;" type="text" size="1" autocomplete="off" data-errorqtip=""></td><td id="TextField1-indicator"><div style="position: relative;"><div class="x-field-indicator  " id="ext-gen1036"></div></div></td></tr></tbody></table></div></span>
            </div>
        </div>
    </div>


    <div class="x-tip x-layer x-tip-default x-border-box" id="ext-quicktips-tip" style="display: none;">
        <div class="x-tip-header x-header x-header-horizontal x-docked x-unselectable x-tip-header-default x-horizontal x-tip-header-horizontal x-tip-header-default-horizontal x-top x-tip-header-top x-tip-header-default-top x-docked-top x-tip-header-docked-top x-tip-header-default-docked-top" id="ext-quicktips-tip_header">
            <div class="x-header-body x-tip-header-body x-tip-header-body-default x-tip-header-body-horizontal x-tip-header-body-default-horizontal x-tip-header-body-top x-tip-header-body-default-top x-tip-header-body-docked-top x-tip-header-body-default-docked-top x-box-layout-ct x-tip-header-body-default-horizontal x-tip-header-body-default-top x-tip-header-body-default-docked-top" id="ext-quicktips-tip_header-body">
                <div class="x-box-inner " id="ext-quicktips-tip_header-innerCt" role="presentation">
                    <div class="x-box-target" id="ext-quicktips-tip_header-targetEl">
                        <div class="x-component x-header-text-container x-tip-header-text-container x-tip-header-text-container-default x-box-item x-component-default" id="ext-quicktips-tip_header_hd" unselectable="on"><span class="x-header-text x-tip-header-text x-tip-header-text-default" id="ext-quicktips-tip_header_hd-textEl" unselectable="on">&nbsp;</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="x-tip-body x-tip-body-default x-tip-body-default" id="ext-quicktips-tip-body"><span id="ext-quicktips-tip-outerCt" style="display: table;"><div id="ext-quicktips-tip-innerCt" style="height: 100%; vertical-align: top; display: table-cell;"></div></span>
        </div>
        <div class="x-tip-anchor x-tip-anchor-top" id="ext-gen1024"></div>
    </div>
</body>

</html>

Thanks in advance,

**Daniil** · Jun 16, 2014, 7:22 PM

Probably, this loads an InputMask JavaScript file again:

Ext.net.ResourceMgr.load(config['x.res'].res ...

Though I have no idea why it adds it as an inline script instead of a script with an src.

Anyway, I cannot reproduce that. Is it specific to any browser or reproducible in all?

What Ext.NET version do you use?

Do you set any Ext.NET settings in Application or Web.config?

**RCN** · Jun 16, 2014, 8:07 PM

1: I can reproduce it in any Browser.
2: Revision #5861 that you told me to use in post #163041.
3: I do not set any Ext.NET settings in Application or Web.config.

Application:

    public class MvcApplication : System.Web.HttpApplication
    {
        protected void Application_AuthenticateRequest(object sender, System.EventArgs e)
        {
            string url = HttpContext.Current.Request.FilePath;

            if (url.EndsWith("ext.axd"))
            {
                HttpContext.Current.SkipAuthorization = true;
            }
        }

        public static void RegisterGlobalFilters(GlobalFilterCollection filters)
        {
            filters.Add(new HandleErrorAttribute());
        }

        public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.IgnoreRoute("{exclude}/{extnet}/ext.axd");

            routes.MapRoute(
                "Default", // Route name
                "{controller}/{action}/{id}", // URL with parameters
                new { controller = "Examples", action = "Index", id = UrlParameter.Optional } // Parameter defaults
            );

        }

        protected void Application_Start()
        {
            AreaRegistration.RegisterAllAreas();

            RegisterGlobalFilters(GlobalFilters.Filters);
            RegisterRoutes(RouteTable.Routes);
        }
    }

Web.config:

<?xml version="1.0"?>
<!-- 
    Note: As an alternative to hand editing App.InputMask1 file you can use the 
    web admin tool to configure settings for your application. Use
    the Website->Asp.Net Configuration option in Visual Studio.
    A full list of settings and comments can be found in 
    machine.config.comments usually located in 
    \Windows\Microsoft.Net\Framework\v2.x\Config 
-->
<configuration>
  <appSettings>
    <add key="NomeDoSite" value="RcnBs"/>
    <!--Valor temporal do intervalo entre as persist?ncias do valor da propriedade UltimoAcesso das Conex?es ativas. Valor padr?o: 1 minuto (60000 milisegundos).-->
    <add key="IntervaloDoCicloDePersistenciaDoUltimoAcessoDaConexao" value="60000"/>
  </appSettings>
  <system.web>
    <sessionState mode="InProc" timeout="15" regenerateExpiredSessionId="true"/>
    <!-- 
            Set compilation debug="true" to insert debugging 
            symbols into the compiled page. Because App.InputMask1 
            affects performance, set App.InputMask1 value to true only 
            during development.
    -->
    <compilation debug="true" targetFramework="4.0">
      <assemblies>
        <add assembly="System.Web.Mvc, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        <add assembly="System.Web.Abstractions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        <add assembly="System.Web.Routing, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        <add assembly="System.Data.Linq, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
        <add assembly="System.Design, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
        <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
      </assemblies>
    </compilation>
    <customErrors mode="Off"/>
    <pages controlRenderingCompatibilityVersion="4.0" clientIDMode="AutoID">
      <controls>
        <add assembly="Ext.Net" namespace="Ext.Net" tagPrefix="ext"/>
      </controls>
      <namespaces>
        <add namespace="System.Web.Mvc"/>
        <add namespace="System.Web.Mvc.Ajax"/>
        <add namespace="System.Web.Mvc.Html"/>
        <add namespace="System.Web.Routing"/>
        <add namespace="System.Linq"/>
        <add namespace="System.Collections.Generic"/>
      </namespaces>
    </pages>
    <httpHandlers>
      <add path="*.mvc" verb="*" type="System.Web.Mvc.MvcHttpHandler, System.Web.Mvc, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>
      <add path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler" validate="false"/>
      <add path="WebResource.axd" verb="GET" type="System.Web.Handlers.AssemblyResourceLoader" validate="true"/>
      <add path="ChartImg.axd" verb="GET,HEAD" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
    </httpHandlers>
    <httpModules>
      <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net"/>
    </httpModules>
  </system.web>
  <!-- 
        The system.webServer section is required for running ASP.NET AJAX under Internet
        Information Services 7.0.  It is not necessary for previous version of IIS.
  -->
  <system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules runAllManagedModulesForAllRequests="true">
      <add name="DirectRequestModule" type="Ext.Net.DirectRequestModule, Ext.Net"/>
    </modules>
    <handlers>
      <remove name="MvcHttpHandler"/>
      <remove name="UrlRoutingHandler"/>
      <add name="ExtNetHandler" path="*/ext.axd" verb="*" type="Ext.Net.ResourceHandler"/>
      <add name="WebResourceHandler" path="WebResource.axd" verb="GET" type="System.Web.Handlers.AssemblyResourceLoader"/>
      <add name="MvcHttpHandler" preCondition="integratedMode" verb="*" path="*.mvc" type="System.Web.Mvc.MvcHttpHandler, System.Web.Mvc, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
      <add name="ChartImageHandler" preCondition="integratedMode" verb="GET,HEAD" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler, System.Web.DataVisualization, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
    </handlers>
  </system.webServer>
  <runtime>
    <assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
      <dependentAssembly>
        <assemblyIdentity name="System.Web.Mvc" publicKeyToken="31bf3856ad364e35" />
        <bindingRedirect oldVersion="1.0.0.0-2.0.0.0" newVersion="3.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Newtonsoft.Json" publicKeyToken="30ad4fe6b2a6aeed" />
        <bindingRedirect oldVersion="0.0.0.0-5.0.8.0" newVersion="6.0.0.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Ext.Net.Utilities" publicKeyToken="2c34ac34702a3c23" />
        <bindingRedirect oldVersion="0.0.0.0-2.2.1" newVersion="2.3.0" />
      </dependentAssembly>
      <dependentAssembly>
        <assemblyIdentity name="Transformer.NET" publicKeyToken="e274d618e7c603a7" />
        <bindingRedirect oldVersion="0.0.0.0-2.1.0" newVersion="2.1.1" />
      </dependentAssembly>
    </assemblyBinding>
  </runtime>
</configuration>

**Daniil** · Jun 17, 2014, 9:42 AM

A very weird issue and I still cannot reproduce.

Is there a possibility to provide us with an online test case?

**RCN** · Jun 18, 2014, 1:40 PM

As requested:

http://189.84.122.158:8080/SandBox/Example/Index

P.S.: Updated the version of Ext.Net to revision #5872.

**Daniil** · Jun 18, 2014, 2:18 PM

Thank you, I have reproduced the problem with that. I will investigate.

**Daniil** · Jun 18, 2014, 2:33 PM

Please try to remove

ScriptMode="Development"

of the ResourceManager and retest.

**RCN** · Jun 18, 2014, 5:59 PM

Originally Posted by Daniil

Please try to remove

ScriptMode="Development"

of the ResourceManager and retest.

It worked as expected after doing what is described above.

Is it gonna be fixed or the solution provided above is enough?

**Daniil** · Jun 18, 2014, 6:23 PM

I don't think we are going to fix that, but I will explain what happens.

This

<% ResourceManager.RegisterControlResources<InputMask>(); %>

and this

ScriptMode="Development"

causes that "inputmask-debug.js" is being loaded initially.

This

ViewBag.ControlConfig = ComponentLoader.ToConfig(TextField1);

renders "inputmask.js" in the "res" property. As far as you can see it is a release version of the JavaScript file. It happens because the Controller doesn't know anything about the ResourceManager settings on the View, it just deals with the default ScriptMode="Release".

So, this

Ext.net.ResourceMgr.load(config['x.res'].res

loads "inputmask.js" and it resets your overrides.

My suggestion is to set scriptMode="Development" in Web.config instead of on the View. Then a Controller should be able to read that setting.

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

Thread Tools

Search Thread

Display

Similar Threads

i can set Mask for Phone Number + Text for one field ?

[CLOSED] Set a message on a disabled panel mask

[CLOSED] Make disabled=true field font black

[1.0] Binding ext:GridCommand.Disabled to a record field

[CLOSED] Date field mask validation

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources