gridPanel scroll bar issue

[astro]

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]

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]

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]

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]

Both preferably, but in most cases a horizontal scrollbar should be displayed.

[Animal]

So the accumulated widths of all the columns in your ColumnModel adds up to more than 1080?

[astro]

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]

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/s.../extjs_example

[Animal]

You are rendering that grid.

Do not render if you use Containers.

The API docs tell you this.

[astro]

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.