Sencha Touch 使用工具栏中带有选择列表的图标

Question

我想在工具栏中使用选择列表，但有一个图标。例如，有人希望选择半径进行周围地点搜索，我想显示一个图标，然后单击时允许用户选择不同的选项，即（50 米、1 公里、10 公里）。

有没有比选择列表更好的方法来做到这一点？这可以通过工具栏中的选择列表来实现吗？当我尝试这样做时，选择列表显示第一个值。

我试图通过 sencha touch 来实现这一点。

Answer 1

您可以在那里创建两个按钮：一个带有标签，另一个带有值。然后在两个按钮上添加一个处理程序以打开第二个按钮显示的浮动面板。

像这样：

{
    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 元素。