Sencha touch 如何在Sencha Touch中创建一个选择字段，如iPhone铃声屏幕

我正在使用Sencha Touch 1.1.1开发一个应用程序。我想在类似iPhone铃声字段的表单上创建一个项目（见图）。目前我正在使用一个文本字段，当它获得焦点时，我将卡片更改为列表。唯一的问题是屏幕上显示的键盘

---

如何在iOS声音配置中创建类似铃声字段的表单字段？

我现在有一个解决方案。我根据Selectfield的代码创建了一个新类ListField。我想将右边的图标改为指向右边的箭头（如上图所示）——我仍在努力

/**
 * @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);

用法示例：

                {
                    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'
                            });
                        }
                    }
                },

---

在列表的侦听器中添加以下内容：

itemtap : function(dv, ix, item, e){
          setTimeout(function(){dv.deselect(ix);},500);
}