Sencha Touchツールバーで選択リストを使用するアイコン

Question

ツールバーで選択リストを使用したいが、アイコンがある。たとえば、周囲の場所検索に半径を選択したいとします。アイコンを表示したいときにクリックすると、ユーザーはさまざまなオプション（50メートル、1キロメートル、10キロメートル）を選択できます。

これは選択リストよりも優れた方法ですか？これはツールバーの選択リストで可能でしょうか？私がそれをやろうとすると、選択リストに最初の値が表示されます。

私はこれを煎茶のタッチで実現しようとしています。

Answer 1

ラベルのあるボタンと値のボタンの2つのボタンを作成することができます。その後、両方のボタンで1つのハンドラを追加して、2番目のボタンで示されたフローティングパネルを開きます。このような

何か：

{ 
    xtype : 'toolbar', 
    defaults : { 
     scope ; this, 
     handler : showDistanceList, 
     ui :'plain' 
    }, 
    items : [{ 
     text : 'Some label', 
     id : 'label_btn' 
    }, { 
     text : '5 km',   //default 5 km 
     id : 'value_btn' 
    }] 
} 


function showDistanceList(btn){ 
    var distanceListPanel = new Ext.Panel({ 
     floating : true, 
     width : 200, 
     height : 300, 
     //items : someListComponent 
    }); 

    distanceListPanel.showBy(btn); 

    // Set value button value here with the selected list value 
    // Ext.getCmp('value_btn').setValue('value of item selected from list');   
} 

ボタンについては、あなたが任意のアイコンやHTML要素を使用することができます。