Sencha触摸列表组件内的选项卡式工具栏

Question

我正在与Sencha触摸框架和列表项组件。我现在只用了大约2周的时间，我无法弄清楚如何让“onItemDisclosure”打开“detailPanel”。我试图按照这个例子：http://vimeo.com/19245335。下面粘贴了我的代码。很感谢任何形式的帮助。

GoW3Guide.views.detailPanel = Ext.extend(Ext.Panel, { 
     id: 'detailpanel', 
     tpl: 'Hello, {firstName}!', 
     dockedItems: [ 
      { 
       xtype: 'toolbar', 
       items: [{ 
        text: 'back', 
        ui: 'back', 
        handler: function() { 
         GoW3Guide.Viewport.setActiveItem('disclosurelist', {type:'slide', direction:'right'}); 
        } 
       }] 
      } 
     ] 
    }); 

    Ext.reg('detailPanel', GoW3Guide.views.detailPanel); 


    GoW3Guide.views.listPanel = Ext.extend(Ext.List, { 
     id: 'disclosurelist', 
     store: GoW3Guide.ListStore, 
     itemTpl: '<div class="contact">{firstName} {lastName}</div>', 
     grouped: true, 
     onItemDisclosure: function(record, btn, index) { 
      GoW3Guide.views.detailPanel.update(record.data); 
      GoW3Guide.views.Guidescard.setActiveItem('detailpanel'); 
     } 
    }); 

    Ext.reg('listPanel', GoW3Guide.views.listPanel); 



    GoW3Guide.views.Guidescard = Ext.extend(Ext.Panel, { 
     fullscreen: true, 
     layout: 'card', 
     cardSwitchAnimation: 'slide', 
     initComponent: function() { 
      Ext.apply(this, { 
       items: [GoW3Guide.views.listPanel, GoW3Guide.views.detailPanel] 
      }); 
      GoW3Guide.views.Guidescard.superclass.initComponent.apply(this, arguments); 
     } 
    }); 
    Ext.reg('guidescard', GoW3Guide.views.Guidescard); 

Answer 1

您是否收到任何javascript错误？

根据文档setActiveItem需要一个组件实例，一个数字（卡片索引）或一个配置对象，例如， {的xtype： 'detailPanel'}

如果你想创建一个新的细节面板积极尝试

GoW3Guide.views.Guidescard.setActiveItem({xtype:'detailpanel'}); 

或

GoW3Guide.views.Guidescard.setActiveItem(new GoW3Guide.views.detailPanel());