PDA

View Full Version : Padding around GridPanel.



bornsilly
11 Jun 2009, 4:58 AM
Today i finished setting up the Datagrid loading values out of a MySQL table. And succeeded.

However when the GridPanel is displayed there is a 15px padding around it. The GridPanel is part of a Border layout. No matter what I tree this padding seems to always be there.

question is therefore: how to i remove this padding?

Animal
11 Jun 2009, 5:01 AM
Show code.

Animal
11 Jun 2009, 5:02 AM
I suspect that your GridPanel is in fact a child of a Panel which is part of a border layout (as opposed to part of a border layout), and that could be your prob.

bornsilly
11 Jun 2009, 5:07 AM
Animal,

Thanks for your quick reply:

This is my code: It is part of a different panel: However the Tabpanel is draw normal but the grid has this padding.

[

var pnlProjectDetails = new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
title: 'Description',
autoScroll:true
},{
title: 'Tasks',
autoScroll:true
},{
title: 'Resources',
autoScroll:true
},{
title: 'Documents',
autoScroll:true
},{
title: 'Master Gantt',
autoScroll:true
}]
});

var ProjectStore = new Ext.data.JsonStore({
totalProperty: 'total',
root: 'projects',
proxy: new Ext.data.HttpProxy({
url: 'php/prjDataHndlr.php',
method: 'POST'
}),
baseParams:{task: "getprojects"},
fields: [
{name: 'id', type: 'int'},
{name: 'projectid'},
{name: 'projectname', sortDir: 'ASC', sortType: 'asUCString' },
{name: 'customername', sortDir: 'ASC', sortType: 'asUCString' },
{name: 'projectcategory'},
{name: 'projectowner'},
{name: 'projectmanager'},
{name: 'mainproject'},
{name: 'projectdescription'},
{name: 'projectstatus'},
{name: 'percentage', mapping: 'percentagecomplete', type: 'float'},
{name: 'startDate', mapping: 'startdate', type: 'date', dateFormat: 'Y-m-d'},
{name: 'endDate', mapping: 'enddate', type: 'date', dateFormat: 'Y-m-d'}
]
});

ProjectStore.load({params:{start: 0, limit: 10}});

var pnlProjectsGrid = new Ext.grid.GridPanel({
id: 'projectsGrid',
region: 'north',
sm: new Ext.grid.RowSelectionModel(),
store: ProjectStore,
columns: [
{id:'id',header: "ID", width: 30, sortable: true, dataIndex: 'id'},
{header: 'Name', width: 100, sortable: true, dataIndex: 'projectname'},
{header: 'Customer', width: 250, sortable: true, dataIndex: 'customername'},
{header: 'Status', width: 50, sortable: true, dataIndex: 'projectstatus'}
],
stripeRows: true,
height:250,
width:500,
title:'Projects',
viewConfig: { forceFit: true }
});


var pnlProjects = new Ext.Panel({
id:'projects-panel',
layout:'border',
bodyBorder: false,
defaults: {
collapsible: false,
split: true,
animFloat: false,
autoHide: false,
useSplitTips: true,
bodyStyle: 'padding:15px'
},
items: [ pnlProjectsGrid, pnlProjectDetails ]
});



I need to store it into a panel because this panel is loaded in the viewport.

Hope there is a way to remove this padding?

Animal
11 Jun 2009, 5:13 AM
bodyStyle: 'padding:15px'

?

bornsilly
11 Jun 2009, 5:38 AM
bodyStyle: 'padding:15px'

?

Well that would have been my first idea to to set the bodyStyle to Padding: 15px however this didnt solve it.

Animal
11 Jun 2009, 5:41 AM
I mean that's your problem. You are setting the bodyStyle to padding:15px, so that's what you get.

bornsilly
11 Jun 2009, 5:41 AM
Uhg.. never mind..... i see that the padding was set somewhere else... Thanks Animal.