Jun 16, 2014, 1:49 PM
-
-
Jun 16, 2014, 6:39 PMHmm, Weird.
Source before any clicks:
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> </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:"/ux/inputmask/inputmask-js/ext.axd?v=16058"}]},config:"[{\"id\":\"TextField1\",\"plugins\":[{\"proxyId\":\"Mask1\",\"ptype\":\"inputmask\",\"disabled\":true}],\"xtype\":\"textfield\",\"fieldLabel\":\"Field\",\"allowBlank\":false}]"}"> </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"> </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,<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:"/ux/inputmask/inputmask-js/ext.axd?v=16058"}]},config:"[{\"id\":\"TextField1\",\"plugins\":[{\"proxyId\":\"Mask1\",\"ptype\":\"inputmask\",\"disabled\":true}],\"xtype\":\"textfield\",\"fieldLabel\":\"Field\",\"allowBlank\":false}]"}"> </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"> </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>
-
Jun 16, 2014, 7:22 PMProbably, this loads an InputMask JavaScript file again:
Though I have no idea why it adds it as an inline script instead of a script with an src.Ext.net.ResourceMgr.load(config['x.res'].res ...
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? -
Jun 16, 2014, 8:07 PM1: 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:
Web.config: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); } }
<?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>
-
Jun 17, 2014, 9:42 AMA very weird issue and I still cannot reproduce.
Is there a possibility to provide us with an online test case? -
Jun 18, 2014, 1:40 PMAs requested:
http://189.84.122.158:8080/SandBox/Example/Index
P.S.: Updated the version of Ext.Net to revision #5872. -
Jun 18, 2014, 2:18 PMThank you, I have reproduced the problem with that. I will investigate.
-
Jun 18, 2014, 2:33 PMPlease try to remove
of the ResourceManager and retest.ScriptMode="Development"
-
Jun 18, 2014, 5:59 PM
-
Jun 18, 2014, 6:23 PMI don't think we are going to fix that, but I will explain what happens.
This
and this<% ResourceManager.RegisterControlResources<InputMask>(); %>
causes that "inputmask-debug.js" is being loaded initially.ScriptMode="Development"
This
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".ViewBag.ControlConfig = ComponentLoader.ToConfig(TextField1);
So, this
loads "inputmask.js" and it resets your overrides.Ext.net.ResourceMgr.load(config['x.res'].res
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.
Similar Threads
-
i can set Mask for Phone Number + Text for one field ?
By asics167 in forum 2.x HelpReplies: 0Last Post: Dec 09, 2013, 12:47 PM -
[CLOSED] Set a message on a disabled panel mask
By Fergus in forum 2.x Legacy Premium HelpReplies: 2Last Post: Sep 02, 2013, 2:34 PM -
[CLOSED] Make disabled=true field font black
By Pablo_Azevedo in forum 1.x Legacy Premium HelpReplies: 1Last Post: Nov 17, 2011, 10:43 AM -
[1.0] Binding ext:GridCommand.Disabled to a record field
By igitur in forum 1.x HelpReplies: 0Last Post: Jul 26, 2010, 9:09 AM -
[CLOSED] Date field mask validation
By majestic in forum 1.x Legacy Premium HelpReplies: 1Last Post: Nov 27, 2009, 6:16 AM