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

Question

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

以下是我想要实施的图片

Answer 1

您拥有实现该联系人视图屏幕所需的一切，您只需要尝试。

您甚至可以更优化我的代码并且不会复制代码，只是尝试从代码中获取想法。

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

1）基本上，我创建了带有两个按钮和细节面板的contactView面板。

2）细节面板有一个面板，用于显示图像和标签以显示细节。

3）我使用控制器中的next和back按钮控制联系人导航。

<强>模型

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: 'anantha@gmail.com', picture: 'resources/images/pic.jpg'},
            { name:'Viswa', mobileNumber:'9876543218', emailid: 'viswa@gmail.com', picture: 'resources/images/pic1.jpg'},
            { name:'Aravind', mobileNumber:'9878963213', emailid: 'aravind@gmail.com', picture: 'resources/images/pic2.jpg'},
            { name:'Ramesh', mobileNumber:'9877856321', emailid: 'ramesh@gmail.com', 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);
    }
});

<强>控制器

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

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