PDA

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



RCN
May 12, 2014, 7:21 PM
In 2013, i posted a thread regarding remove TextField's InputMask: http://forums.ext.net/showthread.php?24240-CLOSED-Remove-TextField-s-Input-Mask

The given solution was enabling / disabling the InputMask.

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



<ext:TextField ID="TextField1" runat="server">
<Plugins>
<ext:InputMask ID="Mask1" runat="server" Mask="" Enabled="false" />
</Plugins>
</ext:TextField>


By doing so, i get the following error:

http://forums.ext.net/attachment.php?attachmentid=10861&stc=1

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



<script type="text/javascript">
Ext.net.InputMask.override({
setMask: function (mask) {
debugger;

if (arguments[0] == undefined) {
arguments[0] = "";
}

this.callParent(arguments);
}
});
</script>


The code above sets the mask to "" when it equals undefined.

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

Thanks in advance

Daniil
May 13, 2014, 11:42 AM
Hi Raphael,

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

It has been fixed in the revision #5835.

Btw, please use Disabled="true" instead of Enabled="false".

RCN
May 13, 2014, 2:03 PM
Thank you Daniil. Please mark this thread as closed.

RCN
May 30, 2014, 6:08 PM
Hi Raphael,

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

It has been fixed in the revision #5835.

Btw, please use Disabled="true" instead of Enabled="false".

On my previous post i asked for you mark this thread as closed but i only was able to test the solution provided by you at this time. Unfortunately i had no success since i was not able to find InputMask's Disable property, as shown below:



TextField TextField1 = new TextField { ID = "TextField1" };
TextField1.Plugins.Add(new InputMask { ID = "Mask1", Mask = "", Disabled = true });


11711

Daniil
Jun 02, 2014, 5:17 AM
Indeed. Thank for pointing that out. I've created an Issue and we will fix shortly.
https://github.com/extnet/Ext.NET/issues/499

As a workaround please use an InputMask's CustomConfig.

Daniil
Jun 02, 2014, 8:20 AM
There were a few problems more. I've committed the fix in the revision #5861. Could you, please, let me know it works well for you now or not?

RCN
Jun 05, 2014, 8:24 PM
Thank you for the fix Daniil. Unfortunately it did not solved my problem.

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

In the following example we are able to identify a couple of scenarios that show that the TextField's standard behaviour is not equal to the TextField's behavior after enabling and disabling its mask:


<html>
<head runat="server">
<title>Mask Example</title>
<script type="text/javascript">

var ValidadeForm = function () {

var fields = App.FormPanel1.form.getFields().items;
var firstInvalid = undefined;

for (var i = 0; i < fields.length; i++) {

if (!fields[i].validate() && firstInvalid === undefined) {
firstInvalid = fields[i];
}
}

if (firstInvalid !== undefined) {
firstInvalid.focus();
}
}

var EnableAndDisableTheMaskOnTheTextField3And4 = function () {

App.InputMask3.enable();
App.InputMask3.disable();

App.InputMask4.enable();
App.InputMask4.disable();
}

</script>
</head>
<body>
<ext:ResourceManager runat="server" SeparateUIStyles="false" Theme="Gray" ScriptMode="Development" />
<br />
<ext:Button Text="Step #1: Validade Form!" runat="server">
<Listeners>
<Click Handler="ValidadeForm();" />
</Listeners>
</ext:Button>
<br />
<ext:Button Text="Step #2: Enable and Disable the Mask on the TextField #3 and #4!"
runat="server">
<Listeners>
<Click Handler="EnableAndDisableTheMaskOnTheTextField3And4();" />
</Listeners>
</ext:Button>
<br />
<ext:FormPanel ID="FormPanel1" runat="server">
<Items>
<ext:TextField ID="TextField1" runat="server" AllowBlank="false" FieldLabel="TextField #1"
Text="Test Text">
<Plugins>
<ext:InputMask ID="InputMask1" runat="server" Mask="" Disabled="true" />
</Plugins>
</ext:TextField>
<ext:TextField ID="TextField2" runat="server" AllowBlank="false" FieldLabel="TextField #2">
<Plugins>
<ext:InputMask ID="InputMask2" runat="server" Mask="" Disabled="true" />
</Plugins>
</ext:TextField>
<ext:TextField ID="TextField3" runat="server" AllowBlank="false" FieldLabel="TextField #3"
Text="Test Text">
<Plugins>
<ext:InputMask ID="InputMask3" runat="server" Mask="" Disabled="true" />
</Plugins>
</ext:TextField>
<ext:TextField ID="TextField4" runat="server" AllowBlank="false" FieldLabel="TextField #4">
<Plugins>
<ext:InputMask ID="InputMask4" runat="server" Mask="" Disabled="true" />
</Plugins>
</ext:TextField>
</Items>
</ext:FormPanel>
</body>
</html>



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

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

Up to this point, everything worked as expected.


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

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


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

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


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

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


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

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


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

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

PS.: When i downloaded the revision #5861 the Ext.Net.dll had version 2.5.2.16058. But when i downloaded the revision #5856 before that the Ext.Net.dll had the version 2.5.2.18031. Are you knowledge of this?

Daniil
Jun 06, 2014, 6:11 AM
I don't think that this is the expected behavior for this field.

Absolutely.



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


Thank you for your investigation! It nice to deal with you, as usual. Yes, I think you are right, it is because of the preventMark property.

Please try this override.

Fix

Ext.net.InputMask.override({
disable: function () {
if (this.disabled) {
return;
}

this.callParent(arguments);

var field = this.getCmp();

field.blur();
this.unmask();

if (this.originBeginLayout) {
field.getComponentLayout().beginLayout = this.originBeginLayout;
}

if (field.rendered) {
field.mun(field.inputEl, {
scope: field,
keyup: field.onKeyUp,
keydown: field.onKeyDown,
keypress: field.onKeyPress
});
}

field.un("focus", this.onFocus, this);
field.un("blur", this.onBlur, this);
field.un("keydown", this.onKeyDown, this);
field.un("keypress", this.onKeyPress, this);

if (this.rendered) {
this.getCmp().inputEl.un((Ext.isIE ? "paste" : "input"), this.pasteHandler, this);
} else {
field.un("afterrender", this.initPasteEvent, this);
}

if (this.fieldGetErrors) {
field.getErrors = this.fieldGetErrors;
}

field.preventMark = field.originalPreventMark;
},

clearInitError : function () {
var me = this,
field = me.getCmp(),
layout = field.getComponentLayout(),
originFn = layout.beginLayout;

this.originBeginLayout = originFn;

if (!field.preventMark) {
field.originalPreventMark = field.preventMark;
field.preventMark = true;
me.clearPreventMark = true;

layout.beginLayout = function (ownerContext) {
if(me.clearPreventMark) {
field.preventMark = false;
originFn.call(layout, ownerContext);
field.preventMark = true;
}
else{
originFn.call(layout, ownerContext);
}
};
}
}
});




PS.: When i downloaded the revision #5861 the Ext.Net.dll had version 2.5.2.16058. But when i downloaded the revision #5856 before that the Ext.Net.dll had the version 2.5.2.18031. Are you knowledge of this?

Do you mean that last numbers became lower? Well, they doesn't mean real version, it is a revision and it depends on time of a actual build.
http://blogs.msdn.com/b/carloc/archive/2008/02/22/the-meaning-of-version-numbers-in-a-compiled-assembly.aspx

RCN
Jun 06, 2014, 2:13 PM
I will try apply the fix provided above and be sure that i'll keep you posted.

Once again, thank you Daniil

RCN
Jun 16, 2014, 1:08 PM
The fix worked perfectly in the last posted example but my real-world scenario is a bit more complicated than that.
In my scenario the field is dynamically rendered in the page. I tried to apply the fix without success.

Here's another example showing the limitations i experienced:

Controller:


public ActionResult Index()
{
TextField TextField1 = new TextField { ID = "TextField1", AllowBlank = false, FieldLabel = "Field" };
TextField1.Plugins.Add(new InputMask { ID = "Mask1", Mask = "", Disabled = true });

ViewBag.ControlConfig = ComponentLoader.ToConfig(TextField1);

return View();
}

View:


<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

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

<!DOCTYPE html>
<html>
<head runat="server">
<title>Mask Example</title>
<script type="text/javascript">

Ext.net.InputMask.override({
disable: function () {
if (this.disabled) {
return;
}

this.callParent(arguments);

var field = this.getCmp();

field.blur();
this.unmask();

if (this.originBeginLayout) {
field.getComponentLayout().beginLayout = this.originBeginLayout;
}

if (field.rendered) {
field.mun(field.inputEl, {
scope: field,
keyup: field.onKeyUp,
keydown: field.onKeyDown,
keypress: field.onKeyPress
});
}

field.un("focus", this.onFocus, this);
field.un("blur", this.onBlur, this);
field.un("keydown", this.onKeyDown, this);
field.un("keypress", this.onKeyPress, this);

if (this.rendered) {
this.getCmp().inputEl.un((Ext.isIE ? "paste" : "input"), this.pasteHandler, this);
} else {
field.un("afterrender", this.initPasteEvent, this);
}

if (this.fieldGetErrors) {
field.getErrors = this.fieldGetErrors;
}

field.preventMark = field.originalPreventMark;
},

clearInitError: function () {
var me = this,
field = me.getCmp(),
layout = field.getComponentLayout(),
originFn = layout.beginLayout;

this.originBeginLayout = originFn;

if (!field.preventMark) {
field.originalPreventMark = field.preventMark;
field.preventMark = true;
me.clearPreventMark = true;

layout.beginLayout = function (ownerContext) {
if (me.clearPreventMark) {
field.preventMark = false;
originFn.call(layout, ownerContext);
field.preventMark = true;
}
else {
originFn.call(layout, ownerContext);
}
};
}
}
});

var RenderControl = function () {

var control = App._hdnControlConfig.value;

control = Ext.decode(control, true);

var config = control;

if (config && config['x.res']) {

control = Ext.decode(config.config, true);

Ext.net.ResourceMgr.load(config['x.res'].res, function () {
Ext.callback(AddControlToForm, this, [control]);
});
}
}

var AddControlToForm = function (control) {

App.FormPanel1.add(control);
}

var ValidadeForm = function () {

var fields = App.FormPanel1.form.getFields().items;
var firstInvalid = undefined;

for (var i = 0; i < fields.length; i++) {

if (!fields[i].validate() && firstInvalid === undefined) {
firstInvalid = fields[i];
}
}

if (firstInvalid !== undefined) {
firstInvalid.focus();
}
}

var EnableAndDisableTheMask = function () {

if (App.Mask1) {

App.Mask1.enable();
App.Mask1.disable();
}
}

</script>
</head>
<body>
<ext:ResourceManager runat="server" SeparateUIStyles="false" Theme="Gray" ScriptMode="Development" />
<ext:Hidden ID="_hdnControlConfig" Text="<%# ViewBag.ControlConfig %>" AutoDataBind="true"
runat="server" />
<br />
<ext:Button Text="Step #1: Render the control into the Form." runat="server">
<Listeners>
<Click Handler="RenderControl();" />
</Listeners>
</ext:Button>
<br />
<ext:Button Text="Step #2: Enable and Disable the Mask on the rendered TextField."
runat="server">
<Listeners>
<Click Handler="EnableAndDisableTheMask();" />
</Listeners>
</ext:Button>
<br />
<ext:Button Text="Step #3: Validade Form!" runat="server">
<Listeners>
<Click Handler="ValidadeForm();" />
</Listeners>
</ext:Button>
<ext:Label Text="(After this, the Required Field validation should turn the
field to red, because there's no text on it and the AllowBlank property is set to
false)" StyleSpec="color: Red;" runat="server"/>
<br />
<br />
<ext:FormPanel ID="FormPanel1" runat="server">
<Items>
</Items>
</ext:FormPanel>
</body>
</html>



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

Can anyone assist me to overcome this issue?

Thanks in advance

Daniil
Jun 16, 2014, 2:49 PM
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, 7: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;d isabled\&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().su bstring(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;d isabled\&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, 8: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, 9:07 PM
1: I can reproduce it in any Browser.
2: Revision #5861 that you told me to use in post #163041 (http://forums.ext.net/showthread.php?34661-OPEN-488-499-Can-t-create-a-Field-with-mask-Disabled&p=163041&viewfull=1#post163041).
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="IntervaloDoCicloDePersistenciaDoUltimoAcessoDaCone xao" 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.ChartHttp Handler, 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.ChartHttp Handler, 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, 10: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, 2: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, 3:18 PM
Thank you, I have reproduced the problem with that. I will investigate.

Daniil
Jun 18, 2014, 3:33 PM
Please try to remove

ScriptMode="Development"
of the ResourceManager and retest.

RCN
Jun 18, 2014, 6:59 PM
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, 7: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.