Question

Sencha的新手，但我设法创建了一个包含项目的列表。单击列表项时，我想显示包含信息的详细视图。我该怎么做呢？我添加了一个列表器并尝试了一些东西，但似乎没有任何工作。

我的列表

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.AuctionDetail', {
    extend: 'Ext.Panel',
    alias: 'widget.auctiondetail',

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

    }
});

所有帮助表示赞赏!!

谢谢！

Answer 1

确定！我设法通过稍微编辑我的代码来解决它。见下文

我的列表

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.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>'

    }
});

像魅力一样！

如何在列表中点击查看Sencha的详细视图？

1 个答案: