implement traversing record prev and next in sencha touchs - extjs

Question

i am trying to create a panel where i can traverse the contact details from phonegap back and forth. so far i have successfully fetched the contact details from phonegap and storing it into an array and loading into Ext.Store. but how would i move to next record until the last one , as there are so many records.
following is the image that i want to implement

Answer 1

You have everything you need to implement that contact view screen, only thing is you need to try.
You can even more optimize my code and don't copy past the code, just try to get idea from the code.
I can explain this code to you but you will understand better when you explore your own.
1) Basically, I created contactView panel with two butons and detail panel.
2) Detail panel have a panel for showing image and label for showing details.
3) I am controlling contact navigation using next and back button in controller.
Model
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'}
]
}
});
Store
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
}
});
View
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();
}
});
Output
We have four record, so
Record 1
Record 2
Record 3
Record 4
That is what i do, i mean trying.