[CLOSED] Set value of a masked control

**RaphaelSaldanha** · Jan 03, 2015, 2:20 AM

On the following example, when the value is TextField is set, the mask is not applied

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <script type="text/javascript">
        var SetValue = function () {
            App._tfd.setValue(12345678);
        }
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" ScriptMode="Debug" />
    <ext:Button Text="Set Value" runat="server">
        <Listeners>
            <Click Handler="SetValue();" />
        </Listeners>
    </ext:Button>
    <ext:TextField ID="_tfd" FieldLabel="Masked Field" AllowBlank="false" runat="server">
        <Plugins>
            <ext:InputMask Mask="9999-9999" runat="server" />
        </Plugins>
    </ext:TextField>
</body>
</html>

**RaphaelSaldanha** · Jan 03, 2015, 2:22 AM

For now, it's possible to overcome the issue by invoking InputMask's validateMask, as shown below:

var SetValue = function () {
    App._tfd.setValue(12345678);
    App._tfd.inputMask.validateMask();
}

It would be nice if this behaviour was implemented internally.

**RaphaelSaldanha** · Jan 14, 2015, 12:29 PM

I confirm that this issue is still reproducible on version 3.1.0.

**RCN** · Jan 29, 2015, 1:40 PM

Any update?

**fabricio.murta** · Feb 02, 2015, 3:58 PM

Hello, not much yet. I've looked upon this, what do you think if you could just

App._tfd.inputMask.setValue(12345678);

And have the value set and mask validated?.. Would that work for you?

The problem of incorporating the mask validation during setValue is that mask validation itself calls setValue() to format the input.

**Daniil** · Feb 04, 2015, 1:57 PM

Agree with Fabricio that it doesn't look to be an option to intervene to a field's setValue method.

I also like his idea:

Ext.net.InputMask.override({
    setValue: function(value) {
        this.getCmp().setValue(value);
        this.validateMask();
    }
});

Another approach could be:

Ext.form.field.Text.override({
    setValueAndMask: function(value) {
        this.setValue(value);

        if (this.inputMask && !this.inputMask.disabled) {
            this.inputMask.validateMask();
        }
    }
});

**RCN** · Feb 04, 2015, 3:18 PM

I am gonna further explain my scenario:

When record is bound to the form, mask is not applied.

Click image for larger version.

Name: fp001.png
Views: 1
Size: 1.9 KB
ID: 20391

When it's focused, mask is applied.

Click image for larger version.

Name: fp002.png
Views: 1
Size: 1.9 KB
ID: 20401

In addition, the scenario presented on post #1 is present in my application but it's possible to overcome by using Ext.form.field.Text.setValueAndMask as suggested by Daniil on post #6. I already use something similar.

<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <script type="text/javascript">
        var LoadRecord = function () {
            App._str.loadRawData({ ID: 1, Phone: 12345678 });

            App._frm.getForm().loadRecord(App._str.getAt(0))
        }
    </script>
</head>
<body>
    <ext:ResourceManager runat="server" Theme="Gray" ScriptMode="Debug" />
    <ext:Store ID="_str" runat="server">
        <Model>
            <ext:Model IDProperty="ID" runat="server">
                <Fields>
                    <ext:ModelField Name="ID" Type="String" />
                    <ext:ModelField Name="Phone" Type="String" />
                </Fields>
            </ext:Model>
        </Model>
    </ext:Store>
    <ext:FormPanel ID="_frm" Title="Form" DefaultAnchor="100%" Width="200" runat="server">
        <FieldDefaults LabelAlign="Top" />
        <Items>
            <ext:TextField FieldLabel="ID" DataIndex="ID" runat="server" />
            <ext:TextField FieldLabel="Phone" DataIndex="Phone" runat="server">
                <Plugins>
                    <ext:InputMask Mask="9999-9999" runat="server" />
                </Plugins>
            </ext:TextField>
        </Items>
        <Buttons>
            <ext:Button Text="Load Record" runat="server">
                <Listeners>
                    <Click Handler="LoadRecord();" />
                </Listeners>
            </ext:Button>
        </Buttons>
    </ext:FormPanel>
</body>
</html>

**RCN** · Feb 04, 2015, 3:56 PM

In addition, it would not override Ext.form.Basic.setValues to overcome the issue presented above, the risk does not pay.

Unfortunately Ext.form.Basic.setValues uses a sub-function, which makes even harder.

Ext.form.Basic.override({
    setValues: function (values) {
        var me = this,
            v, vLen, val;

        function setVal(fieldId, val) {
            var field = me.findField(fieldId),
                map_fields,
                notFound,
                v;

            if (field) {
                var mapping = field.dataIndex && field.dataIndex.split(".");
                if (mapping && mapping[0] === fieldId) {
                    map_fields = me.findMappingFields(fieldId);

                    for (var f = 0; f < map_fields.length; f++) {
                        field = map_fields[f];
                        mapping = field.dataIndex && field.dataIndex.split(".");
                        v = val;
                        notFound = false;

                        for (var i = 1; i < mapping.length; i++) {
                            if (v.hasOwnProperty(mapping[i])) {
                                v = v[mapping[i]];
                            }
                            else {
                                notFound = true;
                                break;
                            }
                        }

                        if (!notFound) {
                            field.setValue(v);

                            if (me.trackResetOnLoad) {
                                field.resetOriginalValue();
                            }
                        }
                    }
                }
                else {
                    field.setValue(val);

                    if (me.trackResetOnLoad) {
                        field.resetOriginalValue();
                    }
                }
            }
        }

        Ext.suspendLayouts();
        if (Ext.isArray(values)) {
            vLen = values.length;

            for (v = 0; v < vLen; v++) {
                val = values[v];

                setVal(val.id, val.value);
            }
        } else {
            Ext.iterate(values, setVal);
        }
        Ext.resumeLayouts(true);
        return this;
    }
});

**RCN** · Feb 10, 2015, 12:10 PM

Any update?

**fabricio.murta** · Feb 11, 2015, 5:03 PM

Well, to avoid overriding directly into sencha's ExtJS, it would be a good idea to avoid the Ext.form.field.Text override.
If we just keep overriding ExtJS code, they might publish updates that breaks the overrides. In the other hand, if we override Ext.net.InputMask, we're changing part of the code under our control.

So, if the first solution @daniil suggested on post #6 fixes your issue, we will prefer doing that instead. Did that first override not fix your issue? If so, we could just apply it.

Its important for us though, that this really fixes the issue for you, otherwise the correction will have no meaning.

The first override suggested by @daniil is that:

Ext.net.InputMask.override({
    setValue: function(value) {
        this.getCmp().setValue(value);
        this.validateMask();
    }
});

Thread: [CLOSED] Set value of a masked control

Thread Tools

Search Thread

Display

[CLOSED] Set value of a masked control

Similar Threads

[CLOSED] Masked textfield readonly is not working

[CLOSED] TextField InputType = Password EmptyTest is masked

I have 2 user control each control have window control.

Textbox Masked

Posting Permissions

Sitemap

Downloads

Resources

Thread: [CLOSED] Set value of a masked control

Thread Tools

Search Thread

Display

[CLOSED] Set value of a masked control

Similar Threads

[CLOSED] Masked textfield readonly is not working

[CLOSED] TextField InputType = Password EmptyTest is masked

I have 2 user control each control have window control.

Textbox Masked

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us