PDA

View Full Version : gridPanel scroll bar issue



astro
30 Sep 2009, 4:04 PM
Hey guys,

Longtime reader first time poster.

Extreme noob with extjs, finished the Learning ExtJS book and started coding.

I'm experiencing a problem with the scrollBar on the editorGridPanel component.
Currently everything is working as it should but the scrollbar only shows up once I do something with the column headers (resize, sort etc). Not sure why this is, but I would like the scrollbar to be there when needed.

AutoScroll is set to true and really the only component I have is the editorGridPanel nothing else. I've read through numerous posts and tried all that was mentioned (autoscrol: false, region: center etc etc) but nothing seemed to work for me.

Here is the relevant part of the code.


grid = new Ext.grid.EditorGridPanel({
cm: getColumnModel(),
buttonAlign: 'left',
ds: ds,
autoScroll: true,
layout: 'fit',
clicksToEdit: 1,
stripeRows:true,
height: 500,
width: 1080,
loadMask: true,
enableColumnMove: false,
enableHdMenu: false,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
title: '{!title}',
buttons: [{
text: 'Save',
handler: function(){readGrid();}
},
{
text: 'Cancel',
handler: function(){cancel();}
}]
});
grid.render('myContactList-grid');
grid.show();

Please let me know if any further information is required.

Thank's in advance for any help provided!

Animal
30 Sep 2009, 9:22 PM
Should work.

autoScroll and layout mean nothing in a GridPanel

There must be something else going on in other code which we can't see.

astro
30 Sep 2009, 10:44 PM
Thank's for replying Animal.

Here's the entire code (i got rid of autoscroll and layout). I only put those in there because I was messing around with options to get it the scroll bar to function correctly.

Also, I made a mistake in saying the scroll bar shows up whenever i perform an action on the column headers. The scrollbar actually only shows up when I sort a column. I'm really at my wits end with this and I truly appreciate the help.

here is the main function which builds out the grid I have other methods which are called but they are simply to setup the datastore and columnmodal and work perfectly fine.


<script>
var GridUI = function() {
var ds; //hold our data
var grid; //component
var columnModel; // definition of the columns

function buildGrid() {

grid = new Ext.grid.EditorGridPanel({
cm: getColumnModel(),
buttonAlign: 'left',
ds: ds,
clicksToEdit: 1,
stripeRows:true,
height: 500,
width: 1080,
loadMask: true,
enableColumnMove: false,
enableHdMenu: false,
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
title: '{!title}',
buttons: [{
text: 'Save',
handler: function(){readGrid();}
},
{
text: 'Cancel',
handler: function(){cancel();}
}]
});
grid.render('myContactList-grid');
grid.show();
}

return {
init : function() {
setupDataSource(); //calls methods for the datastore and columnmodal
buildGrid();
},

getDataSource: function() {
return ds;
}
}
}();

Ext.onReady(GridUI.init, GridUI, true);
</script>
<div id="myContactList-grid"></div>

Animal
30 Sep 2009, 11:12 PM
Which scrollbar are you expecting? Vertical due to there being more rows than will fit in the height, or horizontal due to there being more columns than will fit in the width?

astro
30 Sep 2009, 11:15 PM
Both preferably, but in most cases a horizontal scrollbar should be displayed.

Animal
30 Sep 2009, 11:18 PM
So the accumulated widths of all the columns in your ColumnModel adds up to more than 1080?

astro
30 Sep 2009, 11:24 PM
Yes, the columns are built dynamically based off data retrieved from a database.

They are questions from a questionnaire and so the column headers are the questions and the rows are the answers.

The questions tend to be very long questions and so they run out of the 1080 width size and so the user needs to scroll right and left to be able to see all questions and there answers.

astro
30 Sep 2009, 11:33 PM
Here's a quick example of the problem I'm having in action.

I'm writing this on the force.com platform, hope that helps.

http://www.screentoaster.com/watch/stV0tXQEBIR1xbQ1VeWF5eXlFc/extjs_example

Animal
30 Sep 2009, 11:36 PM
You are rendering that grid.

Do not render if you use Containers.

The API docs tell you this.

astro
30 Sep 2009, 11:41 PM
Sorry Animal, I'm not quite sure what you mean.

If I don't render the grid nothing show's up?

Should I be using another method to display the grid?

Can you point me where I should be reading this information? I've read the API, I'll take another look right now.

Appreciate that help.

Animal
30 Sep 2009, 11:44 PM
It looks like you want the Grid to be in a Container.

So what do the docs for render say? Have you read the docs for render?

astro
30 Sep 2009, 11:51 PM
Aside from the API I'm not sure what else I should be looking at?

I'll look into adding a container and rendering the grid inside the container. One question I have is what made you realize I needed a container? Is it because of my 'need' to render?

Curious as to what made you draw that conclusion is all.

Thank's again.

Animal
30 Sep 2009, 11:59 PM
Because from your screencast it looks like there's a frame: true Panel (or Window) there.

astro
1 Oct 2009, 12:00 AM
I just added that now while testing. even with frame: false the issue is the same. Only there is no frame.

Would I still need a container?

Animal
1 Oct 2009, 1:03 AM
You don't have a wrapping Container at all? just the bare HTML?

astro
1 Oct 2009, 7:51 AM
That's right. I've seen numerous examples of containers being used but for my first foray i wanted to stick with what was working.

If that is standard practice then I will definitely reconsider, especially if it will solve my problem.

Animal
1 Oct 2009, 7:56 AM
Well I strongly recommend you use a Viewport to encapsulate the entire browser window, and then everything is contained, and you never render.

But your problem is weird. If you are rendering into an unstyled div, it should work.

astro
1 Oct 2009, 8:06 AM
I will take a look at encapsulating my grid in a viewport as you had suggested and see if things go a little smoother that way.

Thank's for all the help Animal.