如何在Sencha Touch中創建選擇字段，如iPhone鈴聲屏幕

Question

我正在使用Sencha Touch 1.1.1開發應用程序。我想創建一個類似iPhone鈴聲字段的表單項（見圖）。目前我正在使用文本框，當它變得焦點時，我將卡更改爲列表。唯一的問題是顯示屏幕上的鍵盤。

如何創建一個表單域像iOS的聲音配置的鈴聲場？

Answer 1

我現在有一個解決方案。我創建了一個新的類 - 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' 
          }); 
         } 
        } 
       }, 

Answer 2

在列表中的聽衆

添加以下內容：

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