选项卡式工具栏内的 Sencha Touch List 组件

Posted 2023-02-26

【中文标题】选项卡式工具栏内的 Sencha Touch List 组件

【英文标题】：Sencha Touch List Component Inside Tabbed Toolbar

【发布时间】：2011-06-09 03:03:13

【问题描述】：

我正在使用 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);

【参考方案1】：

您是否收到任何 javascript 错误？

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

如果你想激活一个新的细节面板试试

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

或

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