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

Question

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

我能够显示分段按钮，但不能显示下面的列表，也无法根据按钮的位置添加新列表。

列表视图正在渲染，并且在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'});
}
 }
});