PDA

View Full Version : One scroll for multiple components



brunoferoleto
16 Apr 2012, 9:28 AM
Is there a way of having one scroll controlling multiple components? Like one scroll for 5 grids (They have the same width), or panels, or anything like that? Or at least link one to another so when you change the position the others change too?

scottmartin
16 Apr 2012, 10:52 AM
Will all of these grid contain the same data? I am not sure I understand?

There is nothing built-in.. You could create a listener the check for selection change and then use grid.view.scrollBy on the other grids to inc/dec?

Regards,
Scott.

brunoferoleto
16 Apr 2012, 11:16 AM
Will all of these grid contain the same data? I am not sure I understand?

There is nothing built-in.. You could create a listener the check for selection change and then use grid.view.scrollBy on the other grids to inc/dec?

Regards,
Scott.

Not exactly the same data, but the same structure. Some will have 4, 5 rows, others will have 2, and so on. But they are the "same" grid.

Could you give me a short example of what you proposed with the listener?

scottmartin
16 Apr 2012, 11:28 AM
To clarify:

if grid1.record = 12, grid2..n = 12?

Please note this would be a record change solution and not for using the scrollbar.

Scott.

brunoferoleto
16 Apr 2012, 11:40 AM
There is no record manipulation nor selection. The only way is using the scrollbar, so I need to know when one scroll changes its position, so the others can change theirs too. There will be no arrow keys, or other commands in the grids, only the scrolls.

scottmartin
16 Apr 2012, 12:34 PM
In talking this over with another engineer, you may want to have a look at
Ext.grid.Lockable:: onLockedViewMouseWheel

This is our locking grid. It creates another grid for the locked columns and scrolls in parallel.

Regards,
Scott.

slemmon
16 Apr 2012, 6:52 PM
I had never done this myself so thought I might try my hand at it. See what you think.
*tested on 4.1 RC3 on IE9, FF11, and Chrome 18



Ext.define('SampleStore', {
extend: 'Ext.data.Store'
, alias: 'store.samplestore'

, fields: ['name']
, data: [{
name: 'Ron'
}, {
name: 'Dave'
}, {
name: 'Chuck'
}, {
name: 'Carl'
}, {
name: 'Bob'
}, {
name: 'Hal'
}, {
name: 'Dewey'
}, {
name: 'Malcolm'
}, {
name: 'George'
}, {
name: 'Michael'
}, {
name: 'Tobias'
}, {
name: 'Gob'
}, {
name: 'Oscar'
}]
});


Ext.define('SampleGrid', {
extend: 'Ext.grid.Panel'
, alias: 'widget.samplegrid'

, height: 150
, width: 150
, renderTo: Ext.getBody()
, columns: [{
text: 'Name'
, dataIndex: 'name'
, flex: 1
}]
, store: { type: 'samplestore' }
});


var grid1 = Ext.widget('samplegrid');
var grid2 = Ext.widget('samplegrid', { margin: '10 0 0 0' });


grid1.mon(grid1.getView().getEl(), 'scroll', function (e) {
grid2.getView().getEl().scrollTo('top', grid1.getView().getEl().dom.scrollTop);
});


grid2.mon(grid2.getView().getEl(), 'scroll', function (e) {
grid1.getView().getEl().scrollTo('top', grid2.getView().getEl().dom.scrollTop);
});

scottmartin
17 Apr 2012, 4:22 AM
Very nice ... I like it ...

Regards,
Scott.

brunoferoleto
17 Apr 2012, 8:07 AM
I had never done this myself so thought I might try my hand at it. See what you think.
*tested on 4.1 RC3 on IE9, FF11, and Chrome 18



Ext.define('SampleStore', {
extend: 'Ext.data.Store'
, alias: 'store.samplestore'

, fields: ['name']
, data: [{
name: 'Ron'
}, {
name: 'Dave'
}, {
name: 'Chuck'
}, {
name: 'Carl'
}, {
name: 'Bob'
}, {
name: 'Hal'
}, {
name: 'Dewey'
}, {
name: 'Malcolm'
}, {
name: 'George'
}, {
name: 'Michael'
}, {
name: 'Tobias'
}, {
name: 'Gob'
}, {
name: 'Oscar'
}]
});


Ext.define('SampleGrid', {
extend: 'Ext.grid.Panel'
, alias: 'widget.samplegrid'

, height: 150
, width: 150
, renderTo: Ext.getBody()
, columns: [{
text: 'Name'
, dataIndex: 'name'
, flex: 1
}]
, store: { type: 'samplestore' }
});


var grid1 = Ext.widget('samplegrid');
var grid2 = Ext.widget('samplegrid', { margin: '10 0 0 0' });


grid1.mon(grid1.getView().getEl(), 'scroll', function (e) {
grid2.getView().getEl().scrollTo('top', grid1.getView().getEl().dom.scrollTop);
});


grid2.mon(grid2.getView().getEl(), 'scroll', function (e) {
grid1.getView().getEl().scrollTo('top', grid2.getView().getEl().dom.scrollTop);
});


Let me say it in portuguese: SHOW DE BOLA!

Thanks a lot.