如何在Sencha Touch中创建选择字段(如iPhone铃声屏幕) [英] How to create a select field in Sencha Touch like the iPhone ringtone screen

问题描述

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

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.

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

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

推荐答案

我现在有一个解决方案.我基于Selectfield的代码创建了一个新类-ListField.我想将右侧的图标更改为指向右侧的箭头(如上图所示)-我仍在努力.

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);

示例用法:

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

这篇关于如何在Sencha Touch中创建选择字段(如iPhone铃声屏幕)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！