1. #1
    Sencha Premium Member
    Join Date
    Jan 2010
    Posts
    41
    Vote Rating
    -1
    rishisaraf11 is an unknown quantity at this point

      0  

    Default Unanswered: scrolling two grid with one scrollbar?

    Unanswered: scrolling two grid with one scrollbar?


    Hi ,

    I have a two grid one in left and one in right. I don't want scroll bar in left grid and its scrolling should be controlled by scrollbar movement of right grid. I tried below code by catch scroll event but it didn't worked. Can someone please help me on this. Below is the code.

    Code:
    Ext.onReady(function() {
    
        var myData = [
            ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
            ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
            ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
            ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
            ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am'],
            ['AT&T Inc.',                           31.61, -0.48, -1.54, '9/1 12:00am'],
            ['Boeing Co.',                          75.43, 0.53,  0.71,  '9/1 12:00am'],
            ['Caterpillar Inc.',                    67.27, 0.92,  1.39,  '9/1 12:00am'],
            ['Citigroup, Inc.',                     49.37, 0.02,  0.04,  '9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company', 40.48, 0.51,  1.28,  '9/1 12:00am'],
            ['Exxon Mobil Corp',                    68.1,  -0.43, -0.64, '9/1 12:00am'],
            ['General Electric Company',            34.14, -0.08, -0.23, '9/1 12:00am'],
            ['General Motors Corporation',          30.27, 1.09,  3.74,  '9/1 12:00am'],
            ['Hewlett-Packard Co.',                 36.53, -0.03, -0.08, '9/1 12:00am'],
            ['Honeywell Intl Inc',                  38.77, 0.05,  0.13,  '9/1 12:00am'],
            ['Intel Corporation',                   19.88, 0.31,  1.58,  '9/1 12:00am'],
            ['International Business Machines',     81.41, 0.44,  0.54,  '9/1 12:00am'],
            ['Johnson & Johnson',                   64.72, 0.06,  0.09,  '9/1 12:00am'],
            ['JP Morgan & Chase & Co',              45.73, 0.07,  0.15,  '9/1 12:00am'],
            ['McDonald\'s Corporation',             36.76, 0.86,  2.40,  '9/1 12:00am'],
            ['Merck & Co., Inc.',                   40.96, 0.41,  1.01,  '9/1 12:00am'],
            ['Microsoft Corporation',               25.84, 0.14,  0.54,  '9/1 12:00am'],
            ['Pfizer Inc',                          27.96, 0.4,   1.45,  '9/1 12:00am'],
            ['The Coca-Cola Company',               45.07, 0.26,  0.58,  '9/1 12:00am'],
            ['The Home Depot, Inc.',                34.64, 0.35,  1.02,  '9/1 12:00am'],
            ['The Procter & Gamble Company',        61.91, 0.01,  0.02,  '9/1 12:00am'],
            ['United Technologies Corporation',     63.26, 0.55,  0.88,  '9/1 12:00am'],
            ['Verizon Communications',              35.57, 0.39,  1.11,  '9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',               45.45, 0.73,  1.63,  '9/1 12:00am']
        ];
    
        var store = Ext.create('Ext.data.ArrayStore', {
            fields: [
               {name: 'company'},
               {name: 'price',      type: 'float'},
               {name: 'change',     type: 'float'},
               {name: 'pctChange',  type: 'float'},
               {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
            ],
            data: myData
        });
    
        var selModel = Ext.create('Ext.selection.RowModel', {
            mode : 'SIMPLE'
        });
    
        var panel = Ext.create('Ext.panel.Panel', {
            renderTo : Ext.getBody(),
            width    : 600,
            height   : 400,
            layout   : {
                type  : 'hbox',
                align : 'stretch'
            },
    
            items    : [
                {
                    xtype      : 'gridpanel',
                    flex       : 1,
                    store      : store,
                    selModel   : selModel,
                    title      : 'Left Grid',
                    scroll     : false,
                    border : false,
                    id : 'leftGrid',
                    columns    : [
                        {
                            text      : 'Company',
                            flex      : 1,
                            sortable  : true,
                            dataIndex : 'company'
                        }
                    ],
                    viewConfig : {
                        stripeRows : true
                    }
                },
                {
                    xtype : 'tabpanel',
                    flex  : 1,
                    id : 'tabpanel',
                    items : [
                        {
                            xtype      : 'gridpanel',
                            title      : 'Grid 1',
                            id            : 'tabgrid1',
                            store      : store,
                            selModel   : selModel,
                            columnLines: true,
                            columns    : [
                                {
                                    text      : 'Price',
                                    width     : 75,
                                    sortable  : true,
                                    renderer  : 'usMoney',
                                    dataIndex : 'price'
                                },
                                {
                                    text      : 'Last Updated',
                                    width     : 85,
                                    sortable  : true,
                                    renderer  : Ext.util.Format.dateRenderer('m/d/Y'),
                                    dataIndex : 'lastChange'
                                }
                            ],
                            viewConfig : {
                                stripeRows : true
                            },
                            listeners: {
                                bodyscroll: function(){
                                alert('hi!');
                            }
                            }
                        },
                        {
                            xtype      : 'gridpanel',
                            title      : 'Grid 2',
                            store      : store,
                            id            : 'tabgrid2',
                            selModel   : selModel,
                            columnLines: true,
                            columns    : [
                                {
                                    text      : 'Change',
                                    width     : 75,
                                    sortable  : true,
                                    dataIndex : 'change'
                                },
                                {
                                    text      : '% Change',
                                    width     : 75,
                                    sortable  : true,
                                    dataIndex : 'pctChange'
                                }
                            ],
                            viewConfig : {
                                stripeRows : true
                            }
                        }
                    ]
                }
            ]
        });
    
       var leftGrid = Ext.getCmp('leftGrid').body;
       var tabgrid1 = Ext.getCmp('tabgrid1').body;
       tabgrid1.on('scroll', scrollLeftgrid);
       
       function scrollLeftgrid(s){
             var sc = s.dom.scrollTop;
             leftGrid.scrollTop = sc;
       }
       
     });
    Thanks
    Rishi Saraf

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,119
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    put it on leftGrid.dom.scrollTop

    body.dom.scrollLeft and body.dom.scrollTop will adjust I think.

  3. #3
    Sencha Premium Member
    Join Date
    Jan 2010
    Posts
    41
    Vote Rating
    -1
    rishisaraf11 is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by tvanzoelen View Post
    put it on leftGrid.dom.scrollTop

    body.dom.scrollLeft and body.dom.scrollTop will adjust I think.
    Even that don't work

    Regards
    Rishi Saraf

  4. #4
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,119
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    It must be this but

    Code:
        var leftGrid = Ext.getCmp('leftGrid');
        var tabgrid1 = Ext.getCmp('tabgrid1');
        tabgrid1.getView().on('bodyscroll', scrollLeftgrid);
    
        function scrollLeftgrid(event, target) {
                   
            leftGrid.setScrollTop(target.scrollTop);
        }
    
    });
    question here: why is leftGrid.setScrollTop(target.scrollTop); not working?

  5. #5
    Sencha Premium Member
    Join Date
    Jan 2010
    Posts
    41
    Vote Rating
    -1
    rishisaraf11 is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by tvanzoelen View Post
    It must be this but


    question here: why is leftGrid.setScrollTop(target.scrollTop); not working?
    Because leftGrid have scroll as false. After setting it to true your code works . But I don't want to show the left grid scroll bar. I want scrolling of left grid to be done by right grid scroll bar . Is it possible?

  6. #6
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,119
    Vote Rating
    30
    Answers
    85
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    maybe you can reference that unwanted scroller someway and set a css on it that will make it dissapear.

    Maybe it has a hide function. But don't ask me where that scroller is

  7. #7
    Sencha Premium Member
    Join Date
    Jan 2010
    Posts
    41
    Vote Rating
    -1
    rishisaraf11 is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by tvanzoelen View Post
    maybe you can reference that unwanted scroller someway and set a css on it that will make it dissapear.

    Maybe it has a hide function. But don't ask me where that scroller is
    Thanks I got it .

    Code:
    var leftGridverticalScrollbarConfig = leftGrid.initVerticalScroller();
       leftGridverticalScrollbarConfig.width=1;

Thread Participants: 1