View Full Version : Remove margin from Grid inside Tab

Silver Paladin
2 Apr 2008, 9:27 AM
I have a grid insde a tab panel. It has a margin around the grid, and what I would like is to have the grid use up all the space inside the tab. Screen grab attached.

The Grid:

var grid = new xg.GridPanel({
border: false,
store: new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'fileGroup', direction: "ASC"},
emptyText : 'No Files To Show'
view: new Ext.grid.GroupingView({
groupTextTpl: '{text}',
showGroupName: true
columns: [
{id:'Id', header: "ID", width: 10, dataIndex: 'Id'},
{header: "File", sortable: true, dataIndex: 'File'},
{header: "Size", width: 30, sortable: true, dataIndex: 'Size'},
{header: "Last Updated", width: 30, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'},
{header: "Group", dataIndex: 'fileGroup', hidden:true}
viewConfig: {
forceFit: true,
autoExpandColumn: 'File'

The tabs:

var tabs = new Ext.TabPanel({
id: 'userTabs',
renderTo: 'tabs1',
width: 450,
height: 400,
activeTab: 0,
plain: true,
deferredRender: false,
bodyStyle: 'padding:0px',
layoutOnTabChange: true,
items: [{
title: 'Profile',
contentEl: 'userProfile',
}, {
title: 'Edit Profile',
layout: 'form',
contentEl: 'userProfileEdit',
}, {
title: 'Files', <-- this is the tab with the grid
layout: "fit",
bodyStyle: 'padding:0px',
items: [grid]

2 Apr 2008, 9:46 AM
1. autoExpandColumn referes to a column ID (there is no column with id 'File')
2. You have an extra unneeded panel:

var grid = new xg.GridPanel({
title: 'Files',
var tabs = new Ext.TabPanel({
items: [{
}, grid]

ps. I have no idea where the extra padding in your screenshot comes from. Do you have any custom CSS applied?

Silver Paladin
2 Apr 2008, 11:48 AM
Thanks very much! It was a custom css, I removed it and all works.

The extra panel is added to the tabs later using the add() method.