iPhone着信音のようなSencha Touchで選択フィールドを作成する方法

Question

私はSencha Touch 1.1.1を使ってアプリケーションを開発しています。 iPhoneの着信音のフィールドに似たフォームでアイテムを作成したいと思います（画像参照）。現在、私はテキストフィールドを使用しています。フォーカスを取得すると、カードをリストに変更します。これに関する唯一の問題は、オンスクリーンキーボードが表示されることです。私はiOSのサウンド設定で着信音場のようなフォームフィールドを作成するにはどうすればよい

？

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

Answer 2

次の行を追加します。

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