PDA

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({
id:'filesGrid',
border: false,
store: new Ext.data.GroupingStore({
reader: reader,
data: xg.dummyData,
sortInfo:{field: 'fileGroup', direction: "ASC"},
groupField:'fileGroup',
emptyText : 'No Files To Show'
}),
view: new Ext.grid.GroupingView({
forceFit:true,
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',
autoScroll:true
}, {
title: 'Edit Profile',
layout: 'form',
contentEl: 'userProfileEdit',
autoScroll:true
}, {
title: 'Files', <-- this is the tab with the grid
layout: "fit",
bodyStyle: 'padding:0px',
items: [grid]
}]

Condor
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.