Javascript 如何使点击列表进入Sencha的详细视图？

我对Sencha很陌生，但我已经设法创建了一个包含项目的列表。单击列表项时，我希望显示包含信息的详细视图。我该怎么做？我添加了一个listner并尝试了一些东西，但似乎没有任何效果

我的列表

Ext.define("GS.view.LoggedInView", {
    extend: "Ext.Container",
    config: {
        id: 'acution-list',
        layout: 'vbox',
        fullscreen: true,
        items: [{
            xtype: "toolbar",
            docked: "top",
            title: "Pågående anbud"
        },{ 
            xtype: 'list',
            itemTpl: '<div class="contact"><h1>{name} <tpl if="active != null"><span class="active">{active}</span></tpl><tpl if="inactive != null"><span class="inactive">{inactive}</span></tpl></h1><span class="rating">{rating}</span> &middot; <span class="rating">{amount}</span> </div>',
            grouped: true,
            flex: 1,
            store : 'Auction',
            listeners:{
                itemtap: function(){               
                     //go to the Auction Detial view
                }
            }
        }]
    }
});

Ext.define("GS.view.LoggedInView", {
    extend: "Ext.navigation.View",
    xtype: 'mainAuctionList',
    config: {
        layout: {
            type: 'card',
            animation: {
                type: 'pop'
            }
        },
        fullscreen: true,

        items: [{ 
            title: "Pågående anbud",
            xtype: 'list',
            itemTpl: '<div class="contact"><h1>{name} <tpl if="active != null"><span class="active">{active}</span></tpl><tpl if="inactive != null"><span class="inactive">{inactive}</span></tpl></h1><span class="details">{date}</span> &middot; <span class="details">{rating}</span> &middot; <span class="details">{amount}</span> <i class="arrow"></i></div>',
            grouped: false,
            id: 'auctionlist',
            flex: 1,
            store : 'Auction',
            listeners:{
                itemtap: function (view, index) {
                    var record = this.store.getAt(index)
                    Ext.dispatch({
                        controller: GS.controllers.AuctionController,
                        action: 'showDetail',
                        data: record.data,
                        type: 'slide'
                    });
                },
            }           
        }]
    }
});

感谢所有的帮助

---

谢谢

好的！我通过稍微编辑代码来解决这个问题。见下文

我的列表

Ext.define("GS.view.LoggedInView", {
    extend: "Ext.Container",
    config: {
        id: 'acution-list',
        layout: 'vbox',
        fullscreen: true,
        items: [{
            xtype: "toolbar",
            docked: "top",
            title: "Pågående anbud"
        },{ 
            xtype: 'list',
            itemTpl: '<div class="contact"><h1>{name} <tpl if="active != null"><span class="active">{active}</span></tpl><tpl if="inactive != null"><span class="inactive">{inactive}</span></tpl></h1><span class="rating">{rating}</span> &middot; <span class="rating">{amount}</span> </div>',
            grouped: true,
            flex: 1,
            store : 'Auction',
            listeners:{
                itemtap: function(){               
                     //go to the Auction Detial view
                }
            }
        }]
    }
});

Ext.define("GS.view.LoggedInView", {
    extend: "Ext.navigation.View",
    xtype: 'mainAuctionList',
    config: {
        layout: {
            type: 'card',
            animation: {
                type: 'pop'
            }
        },
        fullscreen: true,

        items: [{ 
            title: "Pågående anbud",
            xtype: 'list',
            itemTpl: '<div class="contact"><h1>{name} <tpl if="active != null"><span class="active">{active}</span></tpl><tpl if="inactive != null"><span class="inactive">{inactive}</span></tpl></h1><span class="details">{date}</span> &middot; <span class="details">{rating}</span> &middot; <span class="details">{amount}</span> <i class="arrow"></i></div>',
            grouped: false,
            id: 'auctionlist',
            flex: 1,
            store : 'Auction',
            listeners:{
                itemtap: function (view, index) {
                    var record = this.store.getAt(index)
                    Ext.dispatch({
                        controller: GS.controllers.AuctionController,
                        action: 'showDetail',
                        data: record.data,
                        type: 'slide'
                    });
                },
            }           
        }]
    }
});

Ext.define（“GS.view.LoggedInView”{
扩展：“Ext.navigation.View”，
xtype:“mainAuctionList”，
配置：{
布局：{
键入：“卡”，
动画：{
类型：'流行'
}
},
全屏：对，
项目：[{
标题：“Pågående anbud”，
xtype:'列表'，
itemTpl:“{name}{active}{inactive}{date}·；{rating}·；{amount}”，
分组：假，
id:“拍卖列表”，
弹性：1，
商店：“拍卖”，
听众：{
itemtap：功能（视图、索引）{
var record=this.store.getAt（索引）
分机调度({
控制器：GS.controllers.AuctionController，
行动：“展示细节”，
数据：record.data，
类型：“幻灯片”
});
},
}           
}]
}
});

我的详细视图

Ext.define('GS.view.AuctionDetail', {
    extend: 'Ext.Panel',
    alias: 'widget.auctiondetail',

    config: {
        styleHtmlContent: true,
        scrollable: 'vertical',
        title: 'Details',
        html: 'Hello!'

    }
});

Ext.define('GS.view.AuctionDetail', {
    extend: 'Ext.Panel',
    xtype: 'autionDetails',
    alias: 'widget.auctiondetail',

    config: {
        styleHtmlContent: true,
        scroll: 'vertical',
        title: 'Date',
        layout: 'card',
        tpl: '<div id="company-info">'+
                    '<div class="content heading">'+     
                        '{name}'+
                        '<p class="details">{orgnr}</p>'+
                    '</div>'+

                    '<div class="content">'+
                        '<table><tbody><tr><td>{rating}</td><td>{turnover}</td><td>{amount}</td></tr></tbody><tfoot><tr><td><p class="details">Rating</p></td><td><p class="details">Omsättning</p></td><td><p class="details">Uppskattat belopp</p></td></tr></tfoot></table>'+
                    '</div>'+
                 '</div>'

    }
});

Ext.define（'GS.view.AuctionDetail'{
扩展：“Ext.Panel”，
xtype:“autionDetails”，
别名：“widget.auctiondetail”，
配置：{
styleHtmlContent:对，
滚动：‘垂直’，
标题：“日期”，
布局：“卡片”，
第三方物流：''+
''+     
“{name}”+
“
{orgnr}
”+
''+
''+
“{评级}{营业额}{金额}
评级
Omsättning
Uppskattat belopp
”+
''+
''
}
});

---

工作起来很有魅力

看看我的回答：谢谢！森查是个新手，我不太明白我该做什么。我应该在我的类中创建一个变量，然后在itemtap上推它吗？谢谢你的帮助！