Force the number keypad on iPhone

[BlueCamel]

This likely would be better as a plugin to Ext.form.Field to start accepting a pattern: option. However, quick and dirty, here is an alternative Number field that will force the numeric keypad on iPhone

Ext.form.Zip = Ext.extend(Ext.form.Text, {
    ui: 'number',
    inputType: 'text',
    minValue : undefined,
    maxValue : undefined,
    stepValue : undefined,
    renderTpl: [
        '<tpl if="label"><div class="x-form-label"><span>{label}</span></div></tpl>',
        '<tpl if="fieldEl"><div class="x-form-field-container">',
            '<input id="{inputId}" type="{inputType}" name="{name}" pattern="[0-9]*" class="{fieldCls}"',
                '<tpl if="tabIndex">tabIndex="{tabIndex}" </tpl>',
                '<tpl if="placeHolder">placeholder="{placeHolder}" </tpl>',
                '<tpl if="style">style="{style}" </tpl>',
                '<tpl if="minValue != undefined">min="{minValue}" </tpl>',
                '<tpl if="maxValue != undefined">max="{maxValue}" </tpl>',
                '<tpl if="stepValue != undefined">step="{stepValue}" </tpl>',
                '<tpl if="autoComplete">autocomplete="{autoComplete}" </tpl>',
                '<tpl if="autoCapitalize">autocapitalize="{autoCapitalize}" </tpl>',
                '<tpl if="autoFocus">autofocus="{autoFocus}" </tpl>',
            '/>',
            '<tpl if="useMask"><div class="x-field-mask"></div></tpl>',
            '</div></tpl>',
        '<tpl if="useClearIcon"><div class="x-field-clear-container"><div class="x-field-clear x-hidden-visibility">&#215;</div><div></tpl>'
    ],
    // @private
    onRender : function() {
        Ext.apply(this.renderData, {
            maxValue : this.maxValue,
            minValue : this.minValue,
            stepValue : this.stepValue 
        });
        
        Ext.form.Zip.superclass.onRender.apply(this, arguments);
    }
});
Ext.reg('zipfield', Ext.form.Zip);

[RunPixelRun]

Thanks. Very handy. This should be a default component.

[MPeg]

ok, nice workaround.

what pattern do i need to use to show numeric keypad with comma or dot to allow my user insert a float number?

Thanks.

[DJFliX]

Hi! I know this is not ST2.0 but have you considered making a version for ST2.0? I'm currently trying to get similar functionality on ST2.0 but I seem to fail.

[frAydjwe]

Have you got an issue for Android ?

[mrduck]

In Sencha Touch 2 you can load the following code to achieve the same behavior.

Ext.define('Ext.field.Number', {    extend: 'Ext.field.Text',
    xtype: 'textnumberfield',


    config: {
        component: {
			pattern : '[0-9]*'
        },
        ui: 'number'
    },
});

[luatbravo]

thank ziu so much, i need it

[congtyhn]

ok, nice workaround. thanks so much

[nhamnt89]

Android phone can run good no?