PDA

View Full Version : Maintain scroll position after adding a grid to different panels



harman
3 Oct 2012, 5:12 AM
Hi All,
I am using ExtJS 4.0.7 in chrome.
I have a requirement where i have to swap the grid between two different panels.
Now when the grid is in the first panel it has a scroll. I scroll down and then add the grid to another panel, and then again bring the grid back to the first panel. But now the scroll is on the top record.
How do i maintain the scroll state?

Following is the sample code


Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [
{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"},
{
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"},
{
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"},
{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"},
{
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"},
{
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"},
{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"},
{
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"},
{
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"},
{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"},
{
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"},
{
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"},
{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"},
{
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"},
{
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"},
{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"},
{
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"},
{
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"},
{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"},
{
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"},
{
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"},
{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"},
{
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"},
{
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"},
{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"},
{
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"},
{
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"},
{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"},
{
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"}
]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});

var myGrid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
autoScroll:true,
store: Ext.data.StoreManager.lookup('simpsonsStore'),
hideMode: 'offsets',
invalidateScrollerOnRefresh: false,
columns: [
{
header: 'Name',
dataIndex: 'name'},
{
header: 'Email',
dataIndex: 'email',
flex: 1},
{
header: 'Phone',
dataIndex: 'phone'}
]
});


Ext.create('Ext.Button', {
text: 'Button 1',
renderTo: Ext.getBody(),
handler: function() {
panel2.add(myGrid);
}
});

Ext.create('Ext.Button', {
text: 'Button 2',
renderTo: Ext.getBody(),
handler: function() {
panel1.add(myGrid);
}
});

var panel1 = new Ext.panel.Panel({
height:200,
width:400,
layout:'fit',
items:[myGrid]
});

var panel2 = new Ext.panel.Panel({
items:[],
height:200,
width:400,
border:true,
layout:'fit'
});

var myMainPanel = new Ext.panel.Panel({
height:200,
width:800,
layout:'hbox',
items:[panel1, panel2],
renderTo: Ext.getBody()
});
?

scottmartin
3 Oct 2012, 6:17 PM
You could using something like:




var pos = myGrid.getView().el.dom.scrollTop;
panel2.add(myGrid);
myGrid.getView().el.dom.scrollTop = pos;


Scott.

harman
4 Oct 2012, 2:19 AM
Hi Scott,

Its working for the browser provided Scroll bar in ExtJS 4.1
But i am using 4.0.7 and when the scroll is Ext.grid.Scroller the records scroll but the view of scrollbar shows it still on Top.

scottmartin
4 Oct 2012, 7:35 AM
Any chance of upgrading to 4.1.x? There are so many problems with 4.07.

Scott.

harman
5 Oct 2012, 2:38 AM
i will see if its possible for me to upgrade the app to 4.1.x.
Thanks for the help any way Scott.