Button 使用Sencha Touch2进行基于上下文的操作

我的要求是在其中一个选项卡面板中有一个选项卡面板和基于上下文（子操作）的分段按钮。单击按钮，我们应该隐藏当前列表并显示新列表

我可以显示分段按钮，但不能显示下面的列表，也不能根据按钮的点击添加新列表

列表视图正在呈现，在chrome调试器中检查时可见，但它不会显示在页面中

Ext.define('myApp.view.Main', {
extend: 'Ext.tab.Panel',
xtype: 'main',
requires: [
    'Ext.TitleBar',
    'Ext.Video',
    'Ext.data.TreeStore',
    'myApp.view.cont',
    'myApp.view.listview'
],
config: {
  tabBarPosition: 'bottom',
    items: [{
 alias : 'widget.myPagesViewPanel',
 title: 'container',
 iconCls: 'user',
 xtype: 'container',
 layout: 'vbox',
 items:[{
   docked: 'top',
   xtype: 'toolbar',
  items: [{
    id:'myPageControls',
    xtype: 'segmentedbutton',
    allowDepress: false,
       items: [{
    text: 'show list1', pressed: true
    },
    {
     text: 'show list2'
    }]
   }]
},
{
 xtype:'listdata',
 layout:'fit'
}]
},
{
 title: 'Contact',
 iconCls: 'user',
 xtype: 'formpanel',
 url: 'contact.php',
 layout: 'vbox',
 items: [{
        xtype: 'fieldset',
    title: 'Contact Us',
    instructions: '(email address is optional)',
    height: 285,
    items: [{
      xtype: 'textfield',
      label: 'Name'
    },
    {
       xtype: 'emailfield',
       label: 'Email'
    },
    {
       xtype: 'textareafield',
       label: 'Message'
    }]
},
    {
            xtype: 'button',
            text: 'Send',
            ui: 'confirm',
            handler: function() {
               this.up('formpanel').submit();
     }
}]
  }]
}
});






Ext.define('myApp.view.centerlistview', {
extend: 'Ext.List',
xtype: 'centerlistdata',
config: {
    onItemDisclosure: false, // by true this will add a arrow mark
    emptyText: 'No data found!',
    store: {
                fields: ['name'],
                    data: [
                        {name: 'list2-1'},
                        {name: 'list2-1'},
                        {name: 'list3-1'}
                    ]
            },
    itemTpl: '{name}'
}

});

Ext.define('myApp.view.listview', {
extend: 'Ext.List',
xtype: 'listdata',
config: {
    onItemDisclosure: false, // by true this will add a arrow mark
    emptyText: 'No data found!',
    store: {
        fields: ['name'],
            data: [
                {name: 'list1-1'},
                {name: 'list1-2'},
                {name: 'list1-3'}
            ]
    },
    itemTpl: '{name}'
}

});




 Ext.define('myApp.controller.MyAppController', {extend : 'Ext.app.Controller',
requires:['myApp.view.centerlistview'],
xtype: 'listdata',
config: {
    refs: {
        segBtnId : "#myPageControls",
       myNavigationView: 'myPagesViewPanel',
    },
     control: {segBtnId : {toggle : "tapHandler"}}},
    launch: function() {this.callParent();},
tapHandler: function(segBtn, button,toggle) {
if(toggle){
 var canvas = segBtn.up().up();
 canvas.setActiveItem({xtype:'centerlistdata'});
}
 }
});