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

Question

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

以下是我要实现的图像

Answer 1

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

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

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

1) 基本上，我创建了带有两个按钮和详细信息面板的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);
    }
});

控制器

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

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