PDA

View Full Version : [CLOSED] Getting the value from TextField with InputMask plugin



centerinform
Sep 02, 2014, 10:56 AM
Hi,

I'm trying to read the value from the textfield with InputMask:


X.TextFieldFor(x => x.Phone, false).Plugins(X.InputMask().Mask("(999) 99-99-99"))

Resulting value (in form, in corresponding model and so on) has all special symbols from the mask like "-","(",")" etc. How to set the field value without it (but the user must see masked value!)?

Daniil
Sep 02, 2014, 12:19 PM
Hi @centerinform,

You can get unmasked value using this JavaScript code.

App.TextField1.inputMask.getUnmaskedValue();

Though, it might be problematic to get it automatically in a submitted data. How do you submit a form?

centerinform
Sep 02, 2014, 12:43 PM
Yes, the main problem is sending the form data. I submit it:


App.Form1.getFieldValues()

via the form action button (in the other place of code). Maybe, it's necessary to use some hidden field with the double-side sync?

Daniil
Sep 02, 2014, 1:24 PM
Then you could override the getModelData function.

<ext:TextField runat="server" Note="(999) 999-9999" FieldLabel="Phone">
<GetModelData Handler="var me = this,
data = null;
if (!me.disabled && !me.isFileUpload()) {
data = {};
data[me.getName()] = me.inputMask.getUnmaskedValue(); //defaults to: data[me.getName()] = me.getValue();
}
return data;" />
<Plugins>
<ext:InputMask runat="server" Mask="(999) 999-9999" />
</Plugins>
</ext:TextField>

See also
http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.form.field.Field-method-getModelData

centerinform
Sep 03, 2014, 7:42 AM
Hi Daniil,

Overriding the GetModelData works but not in all cases. I also have the forms, where the dirtyChange event handler is using in order to watch out for any changes in the form, having been done by users. Applying the InputMask plugin, whereas the data is keeping in DB in unmasked view, makes the data "dirty". It makes semblance that user has changed the data. What can I do to make it works more correctly? (By the way, in the such forms I use GetSubmitData function overriding because GetModelData doesn't work because data is sent via "Send" button)

Daniil
Sep 03, 2014, 9:49 AM
I see...

It might be problematic to achieve that... I can suggest to try to use an additional Hidden field and load a database value to that Hidden field. Then synchronize the Hidden field with a TextField on client putting an unmasked value to the Hidden field and use it on submit. As for the TextField you can exclude it from submitting at all (SubmitValue="false"). Theoretically.

centerinform
Sep 04, 2014, 1:48 PM
Hi Daniil,

Thank's a lot for your help. The problem has been solved with small improvements:



X.HiddenFor(x => x.Phone, false)
.ID(id + "PhoneUnmasked")
.Listeners(ls =>
{
ls.Change.Handler = "var fieldMasked = App." + id + "PhoneMasked; if (fieldMasked.inputMask.getUnmaskedValue() != this.getValue()) { fieldMasked.setValue(this.getValue()); fieldMasked.inputMask.validateMask(); }";
}),
X.TextFieldFor(x => x.Phone, false).DataIndex("PhoneMask")
.ID(id + "PhoneMasked")
.LabelAlign(LabelAlign.Top)
.SubmitValue(false)
.Listeners(ls =>
{
ls.Change.Handler = "var fieldUnmasked = App." + id + "PhoneUnmasked; if (fieldUnmasked.getValue() != this.inputMask.getUnmaskedValue()) { fieldUnmasked.setValue(this.inputMask.getUnmaskedV alue()); }";
ls.BoxReady.Handler = "if(this.mixins && this.mixins.field && typeof this.mixins.field['initValue'] == 'function') { this.mixins.field.initValue.apply(this); this.wasDirty = false; }";
})
.Plugins(X.InputMask().Mask("99-99-99"))
.ColumnWidth(1)
.LabelSeparator("")


The code in the BoxReady Handler has been added for correct opening of the form with the self-made button for the data sending (the Phone field was considered to be "dirty" for some reason). I found this solution here: http://stackoverflow.com/questions/14358004/how-to-set-ext-form-dirty-state

Daniil
Sep 04, 2014, 2:07 PM
Thank you for sharing!