Как создать поле выбора в Sencha Touch, как экран рингтона iPhone - PullRequest
Новая
       19

Как создать поле выбора в Sencha Touch, как экран рингтона iPhone

2 голосов
/ 04 января 2012

Я занимаюсь разработкой приложения с использованием Sencha Touch 1.1.1.Я хотел бы создать элемент в форме, похожей на поле рингтона iPhone (см. Изображение).В настоящее время я использую текстовое поле и, когда оно фокусируется, я меняю карту на список.Единственная проблема с этим заключается в том, что отображается экранная клавиатура.

enter image description here

Как я могу создать поле формы, подобное полю Мелодия звонка, в конфигурации звука iOS?

Ответы [ 2 ]

1 голос
/ 04 января 2012

У меня есть решение на данный момент.Я создал новый класс - ListField - на основе кода для поля Selectfield.Я хотел бы изменить значок справа на стрелку, указывающую вправо (как на изображении выше) - я все еще работаю над этим. 

/**
 * @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'
                            });
                        }
                    }
                },
0 голосов
/ 23 августа 2012

в списке слушателей добавить следующее: 

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