CODEWITHSUNDEEP
extjssencha-touch-2
Hunt
Hunt

Reputation: 8435

implement traversing record prev and next in sencha touchs

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

enter image description here

Upvotes: 2

Views: 826

Answers (1)

Viswa
Viswa

Reputation: 3211

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: '[email protected]', picture: 'resources/images/pic.jpg'},
            { name:'Viswa', mobileNumber:'9876543218', emailid: '[email protected]', picture: 'resources/images/pic1.jpg'},
            { name:'Aravind', mobileNumber:'9878963213', emailid: '[email protected]', picture: 'resources/images/pic2.jpg'},
            { name:'Ramesh', mobileNumber:'9877856321', emailid: '[email protected]', 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

enter image description here

Record 2

enter image description here

Record 3

enter image description here

Record 4

enter image description here

That is what i do, i mean trying.

Upvotes: 5

Related Questions