View Full Version : problem with grid

9 Jun 2011, 9:18 AM

i created i grid but i have this graphical problem 26524 (see in the right of the image), i would like to have like that 26525

thanks for the help

10 Jun 2011, 5:57 AM
ExtJS version, browsers tested and, if possible, code to reproduce please.

10 Jun 2011, 6:10 AM
thanks for the replay.

EXtjs 3.3.1
browser: firefox 3.6.17

proxy = new Ext.data.HttpProxy({
method: 'GET',
url: 'gethopital.php'

store_hopitaux = new Ext.data.JsonStore({
// store configs
id: 'store_hopitaux',
autoLoad: true,
baseParams: {province: idProv},
proxy: proxy,
fields: ['id_hopital', {name: 'nom_commune', mapping: 'commune'}, 'nom_hopital', {name: 'statut', mapping: 'statut_hopital'}, {name: 'niveau', mapping: 'niveau_hopital'}]

var hopitaux_Grid = new Ext.grid.GridPanel
id: 'gridpanel',
title: title_grid_hopitaux + nameProvince,
height: 252,
width: 430,

iconCls: 'icon-grid',
// frame: true,
autoExpandColumn: 'nom_hopital',
store: store_hopitaux ,
//columnLines: true,
viewConfig: {
stripeRows: true

colModel: new Ext.grid.ColumnModel({
defaults: {
// width: 120,
sortable: true
columns: [
{header: 'id_hopital', dataIndex: 'id_hopital', hidden: true},

{header: 'nom_commune', dataIndex: 'nom_commune', id: 'nom_commune',width: 130},
{header: 'nom_hopital', dataIndex: 'nom_hopital', id: 'nom_hopital'},
{header: 'statut', dataIndex: 'statut' , width: 55},
{header: 'niveau', dataIndex: 'niveau' , width: 45}
listeners: {
rowclick: function(grid, rowI, event) {
idHop = store_hopitaux.data.items[rowI].data.id_hopital;
nomHop = store_hopitaux.data.items[rowI].data.nom_hopital;
graph_accouchHopital( idProv, idHop );

The grid panel is the a panel with table layout manager

dashBoardPanel = new Ext.Panel
id: 'dashBoardPanel',
region: 'center',
border: true,
autoScroll: true,
layout: {
type: 'table',
columns: 2

items:[ graph_1 , hopitaux_Grid, graph_2 ]



10 Jun 2011, 7:28 AM
Why do you need the hidden "id_hopital" column when you have this data available through the store?

10 Jun 2011, 10:31 PM
I just gave your code a try and it all renders correctly for me. That said, from your screenshot it looks like your grid rows are a lot taller than they should be. Do you have any custom CSS that might be mucking around with the sizing of these elements?

You also have a lot of variables being implicitly declared without the var keyword. This will make them global, rather than scoping them to the current function.

11 Jun 2011, 8:32 AM
thanks for the informations.

i need the hidden field to get the id of the hospital selected.

for css i have :

#dashBoardPanel td {
padding: 3px;

#dashBoardPanel tr {

#dashBoardPanel table {


as i said dashBoardPanel has a table layout manager


12 Jun 2011, 1:49 AM
i need the hidden field to get the id of the hospital selected.

That was fay's point, you don't need a hidden column to access that data. You're retrieving the data from the store and the store doesn't care what columns you have in your grid.

Your CSS is mucking around with your grid. GridView uses an HTML table to render the grid so your CSS rules will affect the grid as well as the table layout. That said, though I could reproduce the bigger cells you're getting I couldn't reproduce the problem with columns not lining up.

First thing I'd try is removing your CSS rules to see if that fixes it. Then I'd try using a layout other than table layout to see if it renders correctly within other layouts. You only have 3 items so a table layout is almost certainly not the right choice. Take a look at the layout browser example but I suspect you'll find either a border layout or a combination of vbox and hbox layouts to be preferable.