extjs - 在sencha touch中实现遍历记录prev和next

Question

我正在尝试创建一个面板，可以在其中来回遍历 phonegap 的联系方式。到目前为止，我已成功从 phonegap 获取联系人详细信息，并将其存储到数组中并加载到 Ext.Store 中。但是我如何移动到下一条记录直到最后一条记录，因为有这么多记录。

以下是我想要实现的图像

Answer 1

您拥有实现联系人 View 屏幕所需的一切，唯一的问题是您需要尝试。

您甚至可以进一步优化我的代码，不要复制代码，只需尝试从代码中获取想法即可。

我可以向您解释这段代码，但当您探索自己的代码时，您会更好地理解。

1)基本上，我创建了带有两个按钮和详细信息面板的 contactView 面板。

2)详细信息面板有一个用于显示图像的面板和一个用于显示详细信息的标签。

3)我使用 Controller 中的下一个和后退按钮控制联系人导航。

型号

Ext.define('ContactApp.model.Contact', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            {name: 'name',  type: 'string'},
            {name: 'mobileNumber',   type: 'string'},
            {name: 'emailid', type: 'string'},
            {name: 'picture', type: 'string'}
        ]
    }
});

商店

Ext.define('ContactApp.store.Contact',{
    extend : 'Ext.data.Store',
    config : {
        model: "ContactApp.model.Contact",
        storeId : 'contact',
        data : [
            { name:'Anantha', mobileNumber:'9845633215', emailid: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9ffef1fef1ebf7fedff8f2fef6f3b1fcf0f2" rel="noreferrer noopener nofollow">[email protected]</a>', picture: 'resources/images/pic.jpg'},
            { name:'Viswa', mobileNumber:'9876543218', emailid: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a2d4cbd1d5c3e2c5cfc3cbce8cc1cdcf" rel="noreferrer noopener nofollow">[email protected]</a>', picture: 'resources/images/pic1.jpg'},
            { name:'Aravind', mobileNumber:'9878963213', emailid: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e4859685928d8a80a48389858d88ca878b89" rel="noreferrer noopener nofollow">[email protected]</a>', picture: 'resources/images/pic2.jpg'},
            { name:'Ramesh', mobileNumber:'9877856321', emailid: '<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="97e5f6faf2e4ffd7f0faf6fefbb9f4f8fa" rel="noreferrer noopener nofollow">[email protected]</a>', picture: 'resources/images/pic3.jpg'}
        ],
        autoLoad: true
    }
});

查看

Ext.define('ContactApp.view.Contact',{
    extend : 'Ext.Panel',
    xtype : 'contactView',
    config : {
        items : [{
            xtype : 'titlebar',
            title : 'Contacts',
            items : [{
                ui: 'back', text: 'back', align : 'left', action: 'back', hidden: true
            },{
                ui: 'forward', text: 'next', align : 'right', action: 'next', hidden: true
            }]
        },{
            xtype : 'panel',
            itemId : 'contactDetail',
            layout : 'hbox',
            style : 'margin-left: 15%; margin-top:10%;',
            items : [{
                xtype : 'panel',
                itemId : 'picture',
                tpl : '<img src="{picture}" alt="picture" height= "64" width= "64">'
            },{
                xtype: 'spacer',
                width : 40
            },{
                xtype : 'label',
                itemId : 'details',
                tpl : '<div>{name}</div><div>{mobileNumber}</div><div>{emailid}</div>'
            }]
        }]
    },
    initialize : function() {
        this.fireEvent('onContactViewInit',this);
    }
});

Controller

Ext.define('ContactApp.controller.Contact', {
    extend : 'Ext.app.Controller',
    config : {
        contactCount : 0,
        refs : {
            contactView : 'contactView',
            backBtn : 'button[action=back]',
            nextBtn : 'button[action=next]'
        },
        control : {
            contactView : {
                onContactViewInit : 'onContactViewInit'
            },
            backBtn : {
                tap : 'onBackTap'
            },
            nextBtn : {
                tap : 'onNextTap'
            }
        }
    },
    onContactViewInit : function(){
        var contactStore = Ext.getStore('contact');
        var count = contactStore.getCount();
        if(count){
            var index = this.getContactCount();
            var record = contactStore.getAt(index);
            this.setContact(record.getData());
            if(count>1)
                this.getNextBtn().show();
        }
    },
    setContact : function(data){
        var contactView = this.getContactView();
        var contactDetail = contactView.getComponent('contactDetail');
        contactDetail.getComponent('picture').setData(data);
        contactDetail.getComponent('details').setData(data);
    },
    onBackTap : function(){
        var contactStore = Ext.getStore('contact');
        var count = contactStore.getCount();
        var index = this.getContactCount();
        this.setContactCount(index-1);
        var record = contactStore.getAt(index-1);
        this.setContact(record.getData());
        this.getNextBtn().show();
        if(this.getContactCount() == 0)
            this.getBackBtn().hide();       
    },
    onNextTap : function(){
        var contactStore = Ext.getStore('contact');
        var count = contactStore.getCount();
        var index = this.getContactCount();
        this.setContactCount(index+1);
        var record = contactStore.getAt(index+1);
        this.setContact(record.getData());
        this.getBackBtn().show();
        if(this.getContactCount() == count-1)
            this.getNextBtn().hide();
    }
});

输出

我们有四个记录，所以

记录1

记录2

记录3

记录4

这就是我所做的，我的意思是尝试。