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,483
    Vote Rating
    34
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar