如何在 Sencha Touch 中创建一个选择字段，就像 iPhone 铃声屏幕一样答案

【问题标题】：How to create a select field in Sencha Touch like the iPhone ringtone screen如何在 Sencha Touch 中创建一个选择字段，就像 iPhone 铃声屏幕一样
【发布时间】：2012-08-23 19:01:52
【问题描述】：

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

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

【问题讨论】：

标签： sencha-touch extjs

【解决方案1】：

我现在有一个解决方案。我基于 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'
                            });
                        }
                    }
                },

【讨论】：

【解决方案2】：

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

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

【讨论】：