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

There are several ways to achieve Horizontal sliding style paging for a panel which is horizontally larger than window. Here in part-1 I will show how to use scrollBy() . For my case there are more than 20 Grid panel was added in a Panel. FYI: I used the MVC architecture of ExtJS.

I have added two button at bottom (Next and Prev) to move the scroll. So the code was like bellow:

Panel settings was:

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
    ...
    ...

And code for button with handler:

    dockedItems: [{
        xtype: 'toolbar',
        dock:'bottom',
        ui: 'footer',
        items: [
        {
            text: 'prev'
           iconCls: 'icon-prev'
           handler: function() {
               var cmp = Ext.getCmp("allpackspanel");
               cmp.scrollBy(-300,0,true);
           }
        },
        '->',
        {
            text: 'next'
           iconCls: 'icon-next'
           handler: function() {
               var cmp = Ext.getCmp("allpackspanel");
               cmp.scrollBy(300,0,true);  //300 as I want it will scroll by inner inner grid where inner grid panel size is 300
           }
        }
        ]
    }]

We will see in Part-2 how we can do the same with the position.

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