Question

在我的面板的项目中给出一个列表和一个segmentedButton：

[{
    xtype:'segmentedbutton',
    id:'segmented-btn',
    items: [{
        ui:'action',
        text: 'A',
        pressed: true
    },{
        ui:'action',
        text: 'B',
    }]
},{
    xtype: 'list',
    id: 'toList',
    scrollable: false,
    data: [],
    itemTpl: ['<div id="{title}-item">{title}</div>']
},{
    xtype: 'list',
    id: 'fromList',
    ui: 'round',
    data: [],
    itemTpl: ['<div id="{title}-item">{title}</div>']
}]

当按下分段按钮A时，将隐藏“收件人”列表项，当按下我的分段按钮B时，将隐藏“发件人”列表项并显示“收件人”列表项。

Answer 1

向分段按钮添加侦听器功能

listeners: {
    toggle: function(container, button, pressed){
        if(button.text == 'A'){
            this.down('#fromList').show();
            this.down('#toList').hide();
        } else {
            this.down('#fromList').hide();
            this.down('#toList').show();
        }
    }
}

如果处理程序函数没有，则应该有效。

Answer 2

如果您使用分段按钮您必须指定 hidden：true

您最初需要在哪个列表中不指定隐藏：true以及您必须指定的第二个列表 hidden：true

[{
    xtype: 'segmentedbutton',
    id: 'segmented-btn',
    items: [{
        ui: 'action',
        text: 'A',
        id: 'Abutton', // i added 
        pressed: true
    }, {
        ui: 'action',
        text: 'B',
        id: 'Bbutton', // i added
    }]
}, {
    xtype: 'list',
    id: 'toList',
    scrollable: false,
    data: [],
    itemTpl: ['<div id="{title}-item">{title}</div>']
}, {
    xtype: 'list',
    id: 'fromList',
    ui: 'round',
    hidden: true, // i added
    data: [],
    itemTpl: ['<div id="{title}-item">{title}</div>']
}]


**Now in Controller Code**

'button[action=Abutton]': {
    tap: 'Abutton',
},
'button[action=Bbutton]': {
    tap: 'Bbutton',
},


// now Action

Abutton: function () //first segment button
{
    Ext.getCmp('fromList').hide();
    Ext.getCmp('toList').show();
},


Bbutton: function () // second segment button
{
    Ext.getCmp('toList').hide();
    Ext.getCmp('fromList').show();
}

试试这个会起作用

Sencha Touch 2.0 - 如何隐藏我的列表项？

2 个答案: