Context based operations with Sencha Touch2

Question

My requirement is to have a tabbed panel and context based (sub operations) segmented buttons in one of the tab panels. On click of the button we should hide the current list and show the new list.

I'm able to show the segmented buttons but not the lists below that and also not able to add a new list based on the click of the button.

The list view is getting rendered and is visible when inspected in the chrome debugger however it is not shown in the page.

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'});
}
 }
});