ExtJS: Horizontal sliding style paging for long panel [part-2]

In Part-1 I showed how we can use scrollBy(). In this part-2 we will see how we can do it with Position.

Panel Settings as before:

Ext.define('MyProj.view.AllPacksPanel', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.allpackspanel',
    title: 'All Packs',
    layout: 'hbox',
    id: 'allpackspanel',  //this is the ID we will use to get the component in button handler
    overflowX: 'scroll',  //horizontal scroll will be shown
    ...
    ...

Button with handler.

	dockedItems: [{
        xtype: 'toolbar',
        dock:'bottom',
        ui: 'footer',
        items: [
        {
            text: 'prev'
           iconCls: 'icon-prev'
           handler: function() {
               var cmp = Ext.getCmp("allpackspanel");
               var pos = cmp.getPosition();
               cmp.setPosition(pos[0]+300,pos[1],true);
           }
        },
        '->',
        {
            text: 'next'
           iconCls: 'icon-next'
           handler: function() {
               var cmp = Ext.getCmp("allpackspanel");
               var pos = cmp.getPosition();
               cmp.setPosition(pos[0]-300,pos[1],true);
           }
        }
        ]
    }]

The difference with scrollBy() in nothing at all. You may be noticed that both of this have the scroll bar is visible. If we Disable the scroll bar then this function will have no effect. But, seeing scroll bar is annoying. So We will see in Horizontal sliding style paging using jQuery how we can hide the scroll bar and make a smooth sliding like this.

Advertisements

Leave a Comment

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s