1. #1
    Sencha Premium Member Tarabass's Avatar
    Join Date
    Jun 2010
    Location
    The Netherlands
    Posts
    12
    Vote Rating
    0
    Tarabass is on a distinguished road

      0  

    Default Grid doesn't show scrollbar

    Grid doesn't show scrollbar


    Hi there,

    I'm new to extjs and trying out building a viewport layout. Everything goes well, except for one thing. In my center-region a have a toolbar and a panel containing a grid. When i give the panel containing the grid a fixed height i see scrollbars. when I don't the panel has a height of 100% but the grid isn't scrollable. I found very simular problems and even solutions but they don't fit my needs (or i don't apply them correct). I guess you are screaming for some code now:

    The gridpanel wrapped in a function returning the gridpanel:
    Code:
    function gridPanel() {
    	var grid = new Ext.grid.GridPanel({
    		layout: 'fit',
    		store: store,
    		border: false,
    		bodyStyle: 'padding: 0',
    		columns: [
    			{header: "Author", width: 120, dataIndex: 'Author', sortable: true},
    			{header: "Title", width: 180, dataIndex: 'Title', sortable: true},
    			{header: "Manufacturer", width: 200, dataIndex: 'Manufacturer', sortable: true},
    			{header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
    		]
    	});
    	
    	return grid;
    }
    The viewport (with the panel in de center-region)
    Code:
    var viewport = new Ext.Viewport({
    	layout: 'fit',
    	items: [{
    		xtype: 'grouptabpanel',
    		tabWidth: 150,
    		activeGroup: 0,
    		items: [{
    			mainItem: 1,
    			items: [{
    				title: 'Tickets',
    				layout: 'fit',
    				iconCls: 'x-icon-tickets',
    				tabTip: 'Tickets tabtip',
    				style: 'padding: 5px;'
    			},{
    				title: 'Dashboard',
    				tabTip: 'Dashboard tabtip',
    				layout: 'border',
    				defaults: {
    					collapsible: false,
    					split: true,
    					bodyStyle: 'padding: 0',
    					border: true,
    					layout: 'fit',
    				},
    				items: [{
    					region: 'south',
    					split: false,
    					height: 70,
    					margins: '0 0 0 0'
    				},{
    					region:'east',
    					title: 'Form',
    					collapsible: true,
    					useSplitTips: true,
    					collapsibleSplitTip: "...",
    					margins: '5 5 5 0',
    					cmargins: '5 5 5 5',
    					width: 350,
    					minSize: 150,
    					maxSize: 500,
    					
    					// TabPanelContainer
    					items: tabPanel
    				},{
    					region:'center',
    					layout: 'fit',
    					id: 'center',
    					margins: '5 0 5 5',
    					border: false,
    					items: [{
    						xtype: 'panel',
    						bodyStyle: 'padding: 0',
    						
    						items: [{
    							xtype: 'toolbar',
    							items   : [{
    								xtype:'splitbutton',
    								text: 'Menu Button',
    								iconCls: 'add16',
    								menu: [{text: 'Menu Item 1'}],
    								reorderable: false
    							},{
    								xtype:'splitbutton',
    								text: 'Cut',
    								iconCls: 'add16',
    								menu: [{text: 'Cut Menu Item'}]
    							},{
    								text: 'Copy',
    								iconCls: 'add16'
    							},{
    								text: 'Paste',
    								iconCls: 'add16',
    								menu: [{text: 'Paste Menu Item'}],
    								reorderable: true
    							},{
    								text: 'Format',
    								iconCls: 'add16',
    								reorderable: true
    							}]
    						},{
    							xtype: 'panel',
    							id: 'panel',
    							border: true,// test
    							bodyStyle: 'padding: 0',
    							layout: 'fit',
    							//height: Ext.getLayout().getHeight(),
    							height: '100%',
    
    							items: gridPanel()
    						}]
    					}]
    				}]                
    			}]
    		}]
    	}]
    });
    I hope somebody can help me getting a solution for my problem, and correct me doing it wrong
    -->

  2. #2
    Sencha Premium Member Tarabass's Avatar
    Join Date
    Jun 2010
    Location
    The Netherlands
    Posts
    12
    Vote Rating
    0
    Tarabass is on a distinguished road

      0  

    Default


    It seems that I solved my problem, but created a new one. Where I first had problems with a dynamic height and my width was fully resizable, I know have the grid fully resizable in height but does it have a static width. When I put a 100% width on the toolbar and grid in first render it seems to be fully fill the parent-panel, but after resizing the screen or collapse the form on the right it stays at the same size.

    The grid
    Code:
    function gridPanel() {
    	// create the grid
    	var grid = new Ext.grid.GridPanel({
    		xtype: 'grid',
    		flex: 1,
    		store: store,
    		border: false,
    		bodyStyle: 'padding: 0',
    		autoFill: true,
    		viewConfig: {forceFit: true},
    		//autoSizeColumns: true,
    		//width: '100%',
    		columns: [
    			{header: "Author", width: 120, dataIndex: 'Author', sortable: true, resizable: false, fixed: true},
    			{header: "Title", width: 200, dataIndex: 'Title', sortable: true},
    			{header: "Manufacturer", width: 200, dataIndex: 'Manufacturer', sortable: true},
    			{header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
    		]
    	});
    	
    	return grid;
    }
    The center-region
    Code:
    },{
    	region:'center',
    	id: 'center',
    	margins: '5 0 5 5',
    	border: true,
    	layout: 'vbox',
    	//autoWidth: true,
    
    	items: [{
    		xtype: 'panel',
    		//width: '100%',
    		flex: 0,
    		bodyStyle: 'padding: 0',
    		border: false,
    		items: [{
    			xtype: 'toolbar',
    			width: '100%',
    			
    			items   : [{
    				xtype:'splitbutton',
    				text: 'Menu Button',
    				iconCls: 'add16',
    				menu: [{text: 'Menu Item 1'}],
    				reorderable: false
    			},{
    				xtype:'splitbutton',
    				text: 'Cut',
    				iconCls: 'add16',
    				menu: [{text: 'Cut Menu Item'}]
    			},{
    				text: 'Copy',
    				iconCls: 'add16'
    			},{
    				text: 'Paste',
    				iconCls: 'add16',
    				menu: [{text: 'Paste Menu Item'}],
    				reorderable: true
    			},{
    				text: 'Format',
    				iconCls: 'add16',
    				reorderable: true
    			}]
    		}]
    	},
    		// GridPanel
    		gridPanel()
    	]
    }]
    So I rebuild the layout with less panels (overnested?) and only the toolbar is wrapped in a panel. Together they are wrapped in a vbox, with flex added. The height is now dynamic, the width static
    -->

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

      0  

    Default


    Just configure the GridPanel with region: 'center', tbar: <your toolbar> and use it as the center region. Simples!
    -->

  4. #4
    Sencha Premium Member Tarabass's Avatar
    Join Date
    Jun 2010
    Location
    The Netherlands
    Posts
    12
    Vote Rating
    0
    Tarabass is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    Just configure the GridPanel with region: 'center', tbar: <your toolbar> and use it as the center region. Simples!
    I saw you saying (in some other thread) that you have to control the layout through the layout manager, and that overnesting is not a good thing. I didn't understand what you were saying, I guess i do now

    I ended up with this code for my center-region:
    Code:
    region:'center',
    margins: '5 0 5 5',
    xtype: 'grid',
    store: store,
    autoFill: true,
    viewConfig: {forceFit: true},
    
    columns: [
        {header: "Author", width: 120, dataIndex: 'Author', sortable: true, resizable: false, fixed: true},
        {header: "Title", width: 200, dataIndex: 'Title', sortable: true},
        {header: "Manufacturer", width: 200, dataIndex: 'Manufacturer', sortable: true},
        {header: "Product Group", width: 100, dataIndex: 'ProductGroup', sortable: true}
    ],
    
    tbar: [
        {xtype:'splitbutton', text: 'Menu Button', iconCls: 'add16', menu: [{text: 'Menu Item 1'}], reorderable: false},
        {xtype:'splitbutton', text: 'Cut', iconCls: 'add16', menu: [{text: 'Cut Menu Item'}]},
        {text: 'Copy', iconCls: 'add16'},
        {text: 'Paste', iconCls: 'add16', menu: [{text: 'Paste Menu Item'}], reorderable: true},
        {text: 'Format', iconCls: 'add16', reorderable: true}
    ]
    Less code for more pleasure. The html looks more cleaner now. Thanks for helping me out
    -->

Similar Threads

  1. Why Doesn't My TextArea Show A Scrollbar?
    By mconnors1234 in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 13 May 2010, 5:33 AM
  2. Multiselect with vertical scrollbar doesn't show correctly
    By ShatyUT in forum Ext 3.x: Help & Discussion
    Replies: 0
    Last Post: 27 Apr 2010, 9:40 AM
  3. panel doesn't show scrollbar when autoHeight is true
    By paulwang727 in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 29 Sep 2008, 3:28 PM
  4. Grid doesn't show columns
    By cw in forum Ext 2.x: Help & Discussion
    Replies: 11
    Last Post: 11 Mar 2008, 9:39 AM
  5. Doesn't Show Grid
    By beatlecesar in forum Ext 2.x: Help & Discussion
    Replies: 7
    Last Post: 2 Jan 2008, 9:46 PM

Thread Participants: 1

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi