InputTextMask plugin for Textfield

[dandfra]

I don't understand exactly what you are trying to do...
Can you please add a snippet of code?
Thanks

[philrl9]

Has anyone implemented this code into an editable grid? It's working fine when editing a blank field. But, when I attempt to edit a field with data it's not behaving as expected (at least as I expect it to!).

For example in one field I have an existing phone number: 999-999-9999.

Here's my code for the field:

   { 
    header: "Phone", 
    sortable: true, 
    dataIndex: 'PHONE',
    editor: new Ext.form.TextField({
                allowBlank: false,
       plugins: [new Ext.ux.InputTextMask('(999)999-9999', true)]        
             })
   },

When I edit the field and try to change anything it's behaves inconsistently. If I erase all data in the field using the backspace key I can't type anything in the first position of the field. If I use the arrow key to get to a specific location and then delete and replace a character it works some of the time. It never adds the missing characters as defined in the mask ()-.

[bobbicat71]

Has anyone implemented this code into an editable grid? It's working fine when editing a blank field. But, when I attempt to edit a field with data it's not behaving as expected (at least as I expect it to!).

When I edit the field and try to change anything it's behaves inconsistently. If I erase all data in the field using the backspace key I can't type anything in the first position of the field. If I use the arrow key to get to a specific location and then delete and replace a character it works some of the time. It never adds the missing characters as defined in the mask ()-.

Hello, could you tell me what browser are you using?

[luv2hike]

Nice work, but I found a small bug. Using this:

                    new Ext.form.TextField({
                        fieldLabel:"SSN",
                        xtype:"textfield",
                        allowBlank:false,
                        plugins: [new Ext.ux.InputTextMask('999-99-9999', false)]
                    }), 

works fine except it allows me to enter decimal points (. character). I need it to only accept the digits 0-9.

[philrl9]

I'm using FF 2 (.0.0.12)
Thanks.

[dandfra]

...but maybe not...
I reproduced your problem (maybe). If I'm not wrong your mask is (999)999-9999 but your phone numbers have this format: 123-123-1234. So there is a mismatch between the mask and the format and all goes wrong. The right mask is probably 999-999-9999.
If this is not your problem, can you send me a whole example? I tried to reproduce your problem but it works for me (TM)

[luv2hike]

I have not gotten this to work in the case where it is in a form that is lazily rendered. If I try and use it like:

{
  fieldLabel: 'SSN #',
  name: ssn,
  allowBlank: false,
  plugins: [new Ext.ux.InputTextMask('999-99-9999', false)]
} 

I get this error upon loading the page:
this.field.getEl() has no properties on line 79 of InputTextMask.js.

If I remove the plugins option, the page loads and runs fine, but obviously without the mask for social security numbers. I use this same form in another app where the form is rendered and displayed upon the initial layout, and it works fine. It seems it is only when the form rendering is deferred as it is in a collapsed panel.

[dandfra]

The line with the error should be 83 in the last version.
This is a bit strange since we are using it in lazy initialization... Look for example at http://cherryonext.googlecode.com/sv...utTextMask.htm

Can you please verify if yours is the last version, and evantually send some more detail (ideally a whole example )

[luv2hike]

The line with the error should be 83 in the last version.
This is a bit strange since we are using it in lazy initialization... Look for example at http://cherryonext.googlecode.com/sv...utTextMask.htm

Can you please verify if yours is the last version, and evantually send some more detail (ideally a whole example )

Ok, here is the deal. First, it is line 79 in my version which I only downloaded yesterday. So I'm not sure how else to get the newest version. A version number in the comments at the top might be helpful. Line 79 reads:

this.inputTextElement = this.field.getEl().dom; 

I am not able to post my entire source for the app as there are confidential portions, however I was making a set of static pages that duplicated the layout to be able to post and show the issue. But, the static test pages work.

So now I either go line by line between the test version and the real app to see what is different, or I continue to work on the test version until I get the problem.

Any suggestions or ideas as to what types of things can cause the error on this line so I know where to begin looking? Also, where is the official source for me to get the most current version? Thanks!

[luv2hike]

UPDATE: I broke the static test page with the same error!
This is good because now I can post the code. It's also good because I know exactly what breaks it, but have no idea how to fix it.

The issue is trying to use the same form config in more than one place. I create 2 form objects with one config, and those objects appear in 2 different containers. Without the InputTextMask plugin all is well, the forms work in both places. With the plugin, if I uncomment the 2nd container I get the error. If I comment it out so only one instance of the form is in the layout, it works. See my comments in the code starting with the word NOTE for the exact spot.

The main page:

<html>
<head>
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
<meta HTTP-EQUIV="Expires" CONTENT="-1"/>

<title>Testing ExtJS</title>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/>

<!-- LIBS -->
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="TooltipFix.js"></script>
<script type="text/javascript" src="InputTextMask.js"></script>
<script type="text/javascript" src="complexform.js"></script>
<!-- ENDLIBS -->

<script type="text/javascript">
var eastPanel;
var eastCards;

Ext.onReady(function()
{
    var workData = [
        ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
        ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
    ];
    var workReader = new Ext.data.ArrayReader({}, [
        {name: 'company'},
        {name: 'price', type: 'float'},
        {name: 'change', type: 'float'},
        {name: 'pctChange', type: 'float'},
        {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]);
    
    var workgrid = new Ext.grid.GridPanel({
        store: new Ext.data.Store({
            data: workData,
            reader: workReader
        }),
        columns: [
            {header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
            {header: 'Price', width: 90, sortable: true, dataIndex: 'price'},
            {header: 'Change', width: 90, sortable: true, dataIndex: 'change'},
            {header: '% Change', width: 90, sortable: true, dataIndex: 'pctChange'},
            {header: 'Last Updated', width: 120, sortable: true,
                renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                            dataIndex: 'lastChange'}
        ],
        viewConfig: {
            forceFit: false
        },
        renderTo: Ext.getBody(),
        title: 'Tab Grid One',
        tabTip: 'This is the first grid',
        stripeRows: false,
        frame: true
    });
    workgrid.getSelectionModel().selectFirstRow();
    
    var myData = [
        ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],
        ['Apple',29.89,0.24,0.81,'9/1 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Google',71.72,0.02,0.03,'10/1 12:00am'],
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
        ['Ext',83.81,0.28,0.34,'9/12 12:00am'],
        ['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
        ['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
    ];
    var myReader = new Ext.data.ArrayReader({}, [
        {name: 'company'},
        {name: 'price', type: 'float'},
        {name: 'change', type: 'float'},
        {name: 'pctChange', type: 'float'},
        {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
    ]);
    
    var grid = new Ext.grid.GridPanel({
        store: new Ext.data.Store({
            data: myData,
            reader: myReader
        }),
        columns: [
            {header: 'Company', width: 120, sortable: true, dataIndex: 'company'},
            {header: 'Price', width: 90, sortable: true, dataIndex: 'price'},
            {header: 'Change', width: 90, sortable: true, dataIndex: 'change'},
            {header: '% Change', width: 90, sortable: true, dataIndex: 'pctChange'},
            {header: 'Last Updated', width: 120, sortable: true,
                renderer: Ext.util.Format.dateRenderer('m/d/Y'),
                            dataIndex: 'lastChange'}
        ],
        viewConfig: {
            forceFit: false
        },
        renderTo: Ext.getBody(),
        title: 'Tab Grid Two',
        tabTip: 'This is the second grid',
        stripeRows: false,
        frame: true
    });
    grid.getSelectionModel().selectFirstRow();
    
    var viewport = new Ext.Viewport(
    {
        layout:"border",
        renderTo: Ext.getBody(),
        items:[
            {
                id: 'north',
                region:"north",
                title:"Testing Form Layouts",
                bodyStyle:"background-color:#bacfff",
                height:50,
                buttons: [
                    {
                        handler: function() {
                            eastPanel.expand();
                            eastCards.getLayout().setActiveItem("newform");
                        },
                        text: "Show Form",
                        tooltip: "Click to show form"
                    }
                ]
            },
            new Ext.Panel({
                region:'center',
                layout:'border',
                items:[
                    new Ext.Panel({
                        region:"south",
                        bodyStyle:"background-color:#bacfff",
                        title:"Details",
                        height:80,
                        autoScroll:true,
                        collapsible:true,
                        split:true
                    }),
                    new Ext.TabPanel({
                        region:'center',
                        deferredRender:false,
                        activeTab:0,
                        items:[
                            workgrid,
                            grid
                            // NOTE: When I uncomment the following lines, I get the error <-----
                            /*,{
                                xtype: 'panel',
                                layout: 'fit',
                                title: "Form",
                                items: [
                                    testForm
                                ]
                            }*/
                        ]
                    })
                ]
            }),

            // right-side card layout panel
            eastPanel = new Ext.Panel(
            {
                region: "east",
                layout: "border",
                width: 400,
                minWidth: 262,
                split: true,
                animCollapse: false,
                collapsible: true,
                collapseMode: 'mini',
                collapsed: true,
                hideCollapseTool: true,
                items: [
                    eastCards = new Ext.Panel(
                    {
                        region: "center",
                        layout: "card",
                        activeItem: 'qresults',
                        width:400,
                        items: [
                            {
                                xtype: 'panel',
                                id: 'newform',
                                layout: 'fit',
                                title: "New",
                                items: [
                                    testForm2
                                ]
                            },
                            new Ext.Panel(
                            {
                                id: 'qresults',
                                title: "Query Results",
                                autoScroll: true,
                                items: [ Ext.get("queryDiv") ]
                            })
                        ]
                    }),
                    {
                        region: "south",
                        xtype: "panel",
                        layout: "fit",
                        split: true,
                        animCollapse: false,
                        collapsible: true,
                        collapseMode: 'mini',
                        collapsed: true,
                        hideCollapseTool: true,
                        height: 200,
                        items: [ Ext.get("dummy") ]
                    }
                ]
            }) // end main layout east pane
        ]/*,
        // See comment below for initialFormFix
        listeners: {
            afterlayout: {
                fn: initialFormFix,
                single: true
            }
        }*/
    });
    
    // Init the singleton.  Any tag-based quick tips will start working.
    Ext.QuickTips.init();
    
    // Apply a set of config properties to the singleton
    Ext.apply(Ext.QuickTips.getQuickTip(), {
        showDelay: 50,
        dismissDelay: 0,
        animCollapse: false,
        trackMouse: true,
        mouseOffset: [10, 10]
    });
});//end onReady function

// Call fixFormSize for each form that uses it upon initial layout
// NOT USED in this version as it causes an error (since Form is not initially visible?)
function initialFormFix()
{
    fixFormSize(testform);
    // others would follow here if there is more than one form
}

// This makes the form buttons appear the way it is wanted.
function fixFormSize(theform)
{
    theform.suspendEvents();

    var formHeight = theform.getSize().height;
    var ctHeight = theform.ownerCt.getInnerHeight();

    if(formHeight >= ctHeight)
    {
        theform.autoHeight = false;
        theform.setHeight(ctHeight);
    }
    else
    {
        theform.syncSize();
    }

    theform.autoHeight = true;
    theform.resumeEvents();
}
</script>
</head>

<body>
    <div id="queryDiv">Query results</div>
    <div id="dummy">Hi.</div>
</body>
<meta HTTP-EQUIV="Pragma" CONTENT="no-cache"/>
<meta HTTP-EQUIV="Expires" CONTENT="-1"/>
</html> 

complexform.js:

Ext.ux.DateSearch = Ext.extend(Ext.form.DateField, {
    initComponent: Ext.form.TwinTriggerField.prototype.initComponent,
    getTrigger: Ext.form.TwinTriggerField.prototype.getTrigger,
    initTrigger: Ext.form.TwinTriggerField.prototype.initTrigger,
    onTrigger1Click: Ext.form.DateField.prototype.onTriggerClick,
    trigger1Class: Ext.form.DateField.prototype.triggerClass,
    trigger2Class: 'x-form-search-trigger'
});

Ext.reg('datesearch', Ext.ux.DateSearch);

var formConfig = {
    autoHeight:true,
    autoScroll: true,
    url: 'save.jsp',
    method: 'POST',
    onSubmit: Ext.emptyFn,
    labelAlign: "right",
    labelWidth: 120,
    //defaults: { labelStyle: "font-weight:bold" },
    defaultType: "textfield",
    monitorValid: true,
    items: [
        {
            fieldLabel: 'Last Name',
            name: 'lastName',
            allowBlank: false
        },
        {
            fieldLabel: 'First Name',
            name: 'firstName',
            allowBlank: false
        },
        {
            fieldLabel: 'Middle Name',
            name: 'middleName',
            allowBlank: true
        },
        {
            fieldLabel: 'SSN #',
            xtype: 'textfield',
            name: 'ssn',
            allowBlank: false,
            plugins: [new Ext.ux.InputTextMask('999-99-9999', false)]
        },
        {
            fieldLabel: 'Date of Birth',
            xtype:'datesearch',
            anchor:'70%',
            name: 'dob',
            allowBlank: false,
            onTrigger2Click: function()
            {
                southPanel.expand();
                southPanel.getLayout().setActiveItem("history");
                historyGrid.setTitle("Date of Birth");
                historyGrid.store.load(
                {
                    params: { table: "ChangeLog", filter: "like 'dob%'" }
                });
            }
        },
        {
            xtype: 'panel',
            layout: 'column',
            items: [
                {
                    layout:'form',
                    items: [
                        {
                            fieldLabel: 'Gender',
                            name: 'gender',
                            xtype: 'radio',
                            boxLabel: 'Female',
                            inputValue: 'F',
                            allowBlank: false,
                            columnWidth: 0.5
                        }
                    ]
                },
                {
                    layout:'form',
                    items: [
                        {
                            hideLabel:true,
                            labelSeparator: '',
                            name: 'gender',
                            xtype: 'radio',
                            boxLabel: 'Male',
                            inputValue: 'M',
                            allowBlank: false,
                            columnWidth: 0.5
                        }
                    ]
                }
            ]
        },
        {
            xtype: 'panel',
            layout: 'form',
            autoHeight: true,
            bodyStyle: "background:#bdc0d9; border:thin solid #AABBCC; margin-left:70px; margin-bottom:8px; width:185px",
            labelWidth: 48,
            items: [
                {
                    fieldLabel: 'Race',
                    name: 'race',
                    xtype: 'radio',
                    boxLabel: 'White',
                    inputValue: 'W',
                    allowBlank: true
                },
                {
                    labelSeparator: '',
                    name: 'race',
                    xtype: 'radio',
                    boxLabel: 'Black',
                    inputValue: 'B',
                    allowBlank: true
                },
                {
                    labelSeparator: '',
                    name: 'race',
                    xtype: 'radio',
                    boxLabel: 'Hispanic',
                    inputValue: 'H',
                    allowBlank: true
                },
                {
                    labelSeparator: '',
                    name: 'race',
                    xtype: 'radio',
                    boxLabel: 'Asian',
                    inputValue: 'A',
                    allowBlank: true
                },
                {
                    labelSeparator: '',
                    name: 'race',
                    xtype: 'radio',
                    boxLabel: 'Native American',
                    inputValue: 'N',
                    allowBlank: true
                },
                {
                    labelSeparator: '',
                    name: 'race',
                    xtype: 'radio',
                    boxLabel: 'Other',
                    inputValue: 'O',
                    allowBlank: true
                }
            ]
        },
        {
            fieldLabel: 'Address 1',
            name: 'addr1',
            allowBlank: true
        },
        {
            fieldLabel: 'Address 2',
            name: 'addr2',
            allowBlank: true
        },
        {
            fieldLabel: 'Country',
            name: 'country',
            allowBlank: true
        },
        {
            fieldLabel: 'City',
            name: 'city',
            allowBlank: true
        },
        {
            fieldLabel: 'State',
            name: 'state',
            allowBlank: true
        },
        {
            fieldLabel: 'Zip Code',
            name: 'zipcode',
            allowBlank: true
        },
        {
            fieldLabel: 'Primary Phone #',
            name: 'phone1',
            allowBlank: true
        },
        {
            fieldLabel: 'Secondary Phone #',
            name: 'phone2',
            allowBlank: true
        },
        {
            fieldLabel: 'E-mail',
            name: 'email',
            vtype: 'email',
            allowBlank: true
        }
    ],
    buttons: [
        {
            text: 'Save',
            tooltip: 'Click to save',
            formBind: true,
            handler: function()
            {
                this.getForm().submit(
                {
                    success: function(f, action)
                    {
                    }
                });
            }
        },
        {
            text: 'Cancel',
            tooltip: 'Click to cancel',
            handler: function()
            {
            }
        }
    ]
};

// Create form object and resize handler
testForm = new Ext.form.FormPanel(formConfig);
testForm.on('resize', function()
{
    fixFormSize(this);
});

// Create form object and resize handler
testForm2 = new Ext.form.FormPanel(formConfig);
testForm2.on('resize', function()
{
    fixFormSize(this);
});