Question

I am developing an app using Sencha Touch 1.1.1. I would like to create an item on a form similar to the iPhone ringtone field (see image). Currently I’m using a textfield and when it gets focus I’m changing the card to a list. The only problem with this is the on-screen keyboard is displayed.

How can I create a form field like the Ringtone field in the iOS sound configuration?

Answer 1

I have a solution for now. I created a new class – ListField – based on the code for the Selectfield. I would like to change the icon at the right to an arrow pointing right (like in the image above) – I’m still working on that.

/**
 * @class Ext.form.List
 * @extends Ext.form.Text
 * @xtype listfield
 */
Ext.form.List = Ext.extend(Ext.form.Text, {
    ui: 'select',

    // @cfg {Number} tabIndex @hide
    tabIndex: -1,

    // @cfg {Boolean} useMask @hide
    useMask: true,

    monitorOrientation: true,

    // @private
    initComponent: function() {

        this.addEvents(
            /**
             * @event tap
             * Fires when this field is tapped.
             * @param {Ext.form.List} this This field
             * @param {Ext.EventObject} e
             */
            'maskTap');

        Ext.form.List.superclass.initComponent.call(this);
    },

    initEvents: function() {
        Ext.form.List.superclass.initEvents.call(this);

        if (this.fieldEl) {
            this.mon(this.fieldEl, {
                maskTap: this.onMaskTap,
                scope: this
            });
        }
    },

    // @private
    onRender: function(){
        Ext.form.List.superclass.onRender.apply(this, arguments);
    },

    onMaskTap: function() {
        if (this.disabled) {
            return;
        }

        this.fireEvent('maskTap', this);

    },

    // Inherited docs
    setValue: function(value) {
        Ext.form.List.superclass.setValue.apply(this, arguments);

        if (this.rendered) {
            this.fieldEl.dom.value = value;
            this.value = value;
        }

        return this;
    },

    // Inherited docs
    getValue: function(){
        return this.value;
    },

    destroy: function() {
        Ext.form.List.superclass.destroy.apply(this, arguments);
        Ext.destroy(this.hiddenField);
    }
});

Ext.reg('listfield', Ext.form.List);

Example Usage:

                {
                    xtype: 'listfield',
                    name: 'MakeModel',
                    label: 'Make/Model',
                    id: 'makeModelField',
                    placeHolder: 'Make/Model',
                    listeners: {
                        maskTap: function(field, e) {
                            Ext.dispatch({
                                controller: truApp.controllers.incidentVehicleController,
                                action: 'showmakes'
                            });
                        }
                    }
                },