PDA

View Full Version : problem with grid



daniel_
9 Jun 2011, 9:18 AM
Hi,

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

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

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

EXtjs 3.3.1
browser: firefox 3.6.17
Code:

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 ]


});

thanks

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

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

daniel_
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;
width:100%;

}
#dashBoardPanel tr {
padding:3px;

width:100%;
}
#dashBoardPanel table {
width:100%;

}

as i said dashBoardPanel has a table layout manager

thanks

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

http://dev.sencha.com/deploy/ext-3.4.0/examples/#sample-9