1. #1
    Ext User
    Join Date
    Sep 2009
    Posts
    15
    Vote Rating
    0
    astro is on a distinguished road

      0  

    Cool gridPanel scroll bar issue

    gridPanel scroll bar issue


    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.

    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!

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    Sep 2009
    Posts
    15
    Vote Rating
    0
    astro is on a distinguished road

      0  

    Default


    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.

    Code:
    <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>

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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?

  5. #5
    Ext User
    Join Date
    Sep 2009
    Posts
    15
    Vote Rating
    0
    astro is on a distinguished road

      0  

    Default


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

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


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

  7. #7
    Ext User
    Join Date
    Sep 2009
    Posts
    15
    Vote Rating
    0
    astro is on a distinguished road

      0  

    Default


    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.

  8. #8
    Ext User
    Join Date
    Sep 2009
    Posts
    15
    Vote Rating
    0
    astro is on a distinguished road

      0  

    Default


    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

  9. #9
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,506
    Vote Rating
    54
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    You are rendering that grid.

    Do not render if you use Containers.

    The API docs tell you this.

  10. #10
    Ext User
    Join Date
    Sep 2009
    Posts
    15
    Vote Rating
    0
    astro is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread