PDA

View Full Version : LockingGridPanel problem with IE 7.0



olamalam
15 Dec 2009, 5:23 AM
Hi to all,

I have a row mismatch problem with LockingGridPanel with IE 7.0 or older versions.
You can see the problem at the attached file. Does anyone faced with this problem?

Thanks in advance...

http://www.extjs.com/forum/attachment.php?attachmentid=17795&stc=1&d=1260883371

Condor
15 Dec 2009, 5:56 AM
Which LockingGridPanel version are you using?

The one that comes with Ext 3.1 has a syncHeights:true config option that would fix this.

If you are using an earlier version then you need to tweak your css so the rows of both the locked and the unlocked section are the same height.

olamalam
15 Dec 2009, 6:09 AM
Hi Condor,

I am using EXT 3.0 so I'll try to tweak my css file.
Which css file did you mean? columnLock.css?
in this file locked or unlocked row heigth's are not set before:

.x-grid3-viewport, .x-grid3-locked{
overflow:hidden;
position:absolute;
}
.x-grid3-locked .x-grid3-scroller{
overflow:hidden;
border-right: 1px solid #99BBE8;
}
.x-grid3-scroll-spacer {
height: 19px;
}

to which property will i set the height?

Condor
15 Dec 2009, 6:29 AM
You are using column renderers in your grid (e.g. to draw the check mark), which affects the row height.

Use IE Developer Tools to find out which element is causing the row height to increase/decrease and write a css rule to fix the height.

olamalam
15 Dec 2009, 7:57 AM
Thanks Condor, I've solved the problem by giving height to the images...

olamalam
18 Dec 2009, 7:45 AM
Hello again Condor,

I realized that I couldn't solve the whole problem by giving height to the images.
When I open the page in small size and the resize to a bigger size, row mismatch occurs again.
I also tried to give height with css as you told before.
.x-grid3-row {
height: 20px;
}
Yes, this equalized the row heights on both size but didn't solve the problem.

Scrolling the grid horizontally removes the row mismatch.
So i decided to solve the problem scrolling the grid horizontally and bring back to the previous position on every window resize. (i know, this is a bit weird workaround. I'm open to any other idea)
How can I put a window resize listener so that i can do grid scroll in it?
I tried:


viewConfig: {
autoScroll:true,
afterRender: function(){
this.constructor.prototype.afterRender.apply(this, arguments);
this.getRow(1).scrollIntoView(this, false);
}
}


and



viewConfig: {
autoScroll:true,
afterRender: function(){
this.constructor.prototype.afterRender.apply(this, arguments);
grid.getView().focusRow(1);
}
}

but in both ways I get
this.getRow() is null or not an object
error.

How can I solve this scroll problem?
Or do you have any other idea to solve the row mismatch problem?

thanks...

olamalam
21 Dec 2009, 1:56 AM
Ok, I migrated the application to Ext 3.1 and set the syncHeights parameter of LockingGridPanel to true and this solved the problem.

thanks again...

olamalam
21 Dec 2009, 2:32 AM
Sorry for interrupting again but i regenerated the same problem with a very weird test scenario.

I resize the explorer to a smaller size, scroll down to the bottom (to the last record of grid) and select the last record. then I enlarge the window again and row mismatch occurs :(

My ext version is 3.1.
My grid panel code is:



grid = new Ext.ux.grid.LockingGridPanel({
region : 'center',
store: store,
cm: cm,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
loadMask: true,
syncHeights: true,
viewConfig: {
//forceFit:true,
enableRowBody:false,
showPreview:false,
autoScroll:true
},
bbar: new Ext.PagingToolbar({
pageSize: parseInt('${params.limit}'),
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: "No topics to display",
items:[
'-',
'TCIDs per page ',
pageCombo
]
}),
tbar : [
new Ext.Button({
text: 'New Search',
handler: function () {
back()
}
}),
new Ext.Button({
hidden: ${DirectorySearchAuthenticationService.isInternalUser(request)},
text: 'Remember My Selection',
handler: function () {
saveUserSelection()
}
})
]
});


How can I solve this problem?
thanks in advance...

olamalam
21 Dec 2009, 6:47 AM
any idea?

Condor
21 Dec 2009, 6:53 AM
syncHeights is a view config option (move it into the viewConfig).

ps. Ext.ux.grid.LockingGridPanel isn't part of Ext 3.1. Are you sure you are using the LockingGridView from Ext 3.1?

olamalam
21 Dec 2009, 7:07 AM
I tried it after posting my message. it's now looks like this:


grid = new Ext.ux.grid.LockingGridPanel({
region : 'center',
store: store,
cm: cm,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
loadMask: true,
viewConfig: {
enableRowBody:false,
showPreview:false,
syncHeights: true,
stripeRows: true,
autoScroll:true
}
});


But the problem still occurs. I guess I'm not using LockingGridView from Ext 3.1
I'm creating LockingGridPanel from my columnLock.js (version v1.7.1 for Ext 3)
and it uses LockingGridView from the same file. how can i change it?

Condor
21 Dec 2009, 7:56 AM
LockingGridView (with syncHeights support) is now part of Ext 3.1 (examples/ux/LockingGridView.js).

It doesn't have an Ext.ux.grid.LockingGridPanel, but that's not a big issue, because you can easily create a GridPanel with a LockingGridView and a LockingColumnModel.

olamalam
22 Dec 2009, 1:03 AM
Hello Condor,
i tried this but row mismatch problem still occurs :(

is this something like this?


var columnModel = new Ext.ux.grid.LockingColumnModel([
{
header: "City",
sortable:true,
dataIndex: 'city',
id: 'city',
hidden: ${!params.isCityColumnVisible}
},
{
header: "Country",
sortable:true,
dataIndex: 'country',
id: 'country',
hidden: ${!params.isCountryColumnVisible}
}
]);
grid = new Ext.grid.GridPanel({
region : 'center',
store: store,
cm: columnModel,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
loadMask: true,
viewConfig: {
enableRowBody:false,
showPreview:false,
syncHeights: true,
stripeRows: true,
autoScroll:true
},
view : new Ext.ux.grid.LockingGridView()
});

Condor
22 Dec 2009, 1:57 AM
You can't use both viewConfig and view!

Use:

grid = new Ext.grid.GridPanel({
region : 'center',
store: store,
cm: columnModel,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
loadMask: true,
view : new Ext.ux.grid.LockingGridView({
enableRowBody:false,
showPreview:false,
syncHeights: true,
stripeRows: true,
autoScroll:true
})
});

olamalam
22 Dec 2009, 5:09 AM
I've done like this:


grid = new Ext.grid.GridPanel({
region : 'center',
store: store,
cm: columnModel,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
loadMask: true,
view : new Ext.ux.grid.LockingGridView({
enableRowBody:false,
showPreview:false,
syncHeights: true,
stripeRows: true,
autoScroll:true
})
});

but still have the same problem.

http://www.extjs.com/forum/attachment.php?attachmentid=17923&stc=1&d=1261487313

olamalam
23 Dec 2009, 4:55 AM
Hello Condor,
Could you see anything wrong in my code? Do you have any idea why this can't work?
thanks..

Condor
23 Dec 2009, 5:26 AM
Are you using examples/ux/LockingGridView.js (and not columnLock.js)?

olamalam
23 Dec 2009, 5:59 AM
yes, I was initially importing columnLock.js. I removed it and now I'm only importing LockingGridView:



<script type="text/javascript" src="${createLinkTo(dir: 'js', file:'ext/3.1.0/examples/ux/LockingGridView.js')}"></script>


I'm using a renderer to display tick image:



function renderInstrument(value, p, r) {
if (value == 1) {
return String.format('<img src="../images/ok.png" height="14" />')
}
}


I had to give height to the image because the row mismatch was occuring always. now its occuring only in this specific case I described formerly.

And my grid is still the same:



grid = new Ext.grid.GridPanel({
region : 'center',
store: store,
cm: cm,
trackMouseOver:false,
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
loadMask: true,
view : new Ext.ux.grid.LockingGridView({
enableRowBody:false,
showPreview:false,
syncHeights: true,
stripeRows: true,
autoScroll:true
})
});


Problem still occurs :(

olamalam
23 Dec 2009, 6:09 AM
And I still have to import columnLock.css right?

Condor
23 Dec 2009, 6:11 AM
No, include examples/ux/css/LockingGridView.css

olamalam
23 Dec 2009, 6:24 AM
Ok, I did that but nothing has changed...