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

我正在尝试创建一个面板，在这里我可以来回浏览

phonegap

中的联系人详细信息。到目前为止，我已经成功地从

phonegap

获取了联系人详细信息，并将其存储到数组中，然后加载到

Ext.Store

。但是，我如何移动到下一个记录，直到最后一个，因为有这么多的记录

下面是我想要实现的图像

---

您拥有实现联系人视图屏幕所需的一切，唯一需要做的就是尝试

你甚至可以对我的代码进行更多的优化，不要抄袭过去的代码，只要试着从代码中获得想法就行了

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

1） 基本上，我创建了带有两个Buton和detail面板的contactView面板

2） “详细信息”面板具有用于显示图像的面板和用于显示详细信息的标签

3） 我使用控制器中的“下一步”和“上一步”按钮控制联系人导航

型号

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);
    }
});

输出

我们有四项纪录，所以

记录1

记录2

记录3

记录4

---

我就是这么做的，我的意思是努力

你想过用旋转木马吗？这是一个完美的用例。。。是的，我已经想到了，但同样的问题，当用户交换时，我将如何遍历？你是说“刷卡”？这正是旋转木马的含义，在商店中每一条记录显示一页，当你滑动屏幕时移动到下一条记录……但我有大约1000条记录，所以如果我将项目推到旋转木马中，你不认为它会变慢一点吗？

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();
    }
});