extjs 4 bug affichage header gridpanel ie 7

[hadesjack]

bonjour,

j'ai un code très simple qui créé un gripanel.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
Ext.onReady(function() {
    // create the data store
	Ext.define('Commande', {
    extend: 'Ext.data.Model',
    fields: [
        {name: 'cmd_id'},
				{name: 'cmd_cli_name'},
				{name: 'cmd_nd_support'},
			    {name: 'cmd_ndi'},
			    {name: 'cmd_date_vente'},
				{name: 'cmd_code_postal'},
				{name: 'r_tyc_shortlabel'},
				{name: 'eta_short_label'},
				{name: 'cmd_date_prev_install'},
				{name: 'cmd_ui_name'},
				{name: 'bme_code'},
				{name: 'cmd_rai_affect_dt'}
				/*{name: 'cmd_rai_affect_dt'},
				{name: 'cmd_rai_affect_dt'}*/
    ]
});
 
var dataStore = Ext.create('Ext.data.Store', {
    model: 'Commande',
    proxy: {
        type: 'ajax',
        url : Ext.app.baseUrl + '/commande/getSearchDatas',
        reader: {
            type: 'json',
            root: 'rows',
			totalProperty:'results'
        }
    },
    autoLoad: true,
	pageSize: 15
});
 
	    var grid = Ext.create('Ext.grid.Panel', {
        columns: [
			{header: "Action", width:50,  dataIndex: 'Traiter', renderer:
			function(value, metadata, record, rowIndex, colIndex, store) {
				return Ext.app.flecheDroite
				+ '<a href="'
				+ Ext.app.editAction
				+ record.data.cmd_id
				+ '" title="'
				+ Ext.app.buttonAction
				+ '">'
				+ Ext.app.buttonAction
				+'</a>';
			}},
			{header: "Nom du client", width:100, dataIndex: 'cmd_cli_name', flex:1},
			{header: "NDI", width:80, dataIndex: 'cmd_ndi'},
			{header: "ND support", width:80, dataIndex: 'cmd_nd_support'},
			{header: "Offre", width:40, dataIndex: 'r_tyc_shortlabel'},
		    {header: "Etat", width:70, dataIndex: 'eta_short_label'},
			{header: "Vente", width:70, dataIndex: 'cmd_date_vente', renderer: Ext.util.Format.dateRenderer('d/m/Y')},
			{header: "Prév install", width:70, dataIndex: 'cmd_date_prev_install', renderer: Ext.util.Format.dateRenderer('d/m/Y')},
			{header: "CP", width:45, dataIndex: 'cmd_code_postal'},
			{header: "Base Mercure", width:90, dataIndex: 'bme_code'},
			{header: "UI", width:70, dataIndex: 'cmd_ui_name'},
			{header: "Affectation", width:70, dataIndex: 'cmd_rai_affect_dt', renderer: Ext.util.Format.dateRenderer('d/m/Y')}
			/*{header: "Action", width:70, dataIndex: ''},
			{header: "Techno", width:70, dataIndex: ''}*/
        ],
		defaults: {               // defaults are applied to items, not the container
            sortable:true
        },
		columnLines:true,
        height:390,
        width:945,
		renderTo: 'searchListGridPanel',
        store: dataStore,
 	    tbar: new Ext.PagingToolbar({
                store: dataStore,
                emptyMsg: 'pas de données'
            })
	  });
});

mon soucis est sous ie7 j'ai les header qui ne sont pas synchroniser avec pmes données en effet j'ai un décalage entre mon header de columùm et la colone ce qui fait qu'on ne sais plus qu'elle donnée appartient à quel colonne.

ca fonctionne sous firefox et pour la petite anecdote on avais un bug similaire en extjs2 mais sous firefox avant comme nos utilisateurs sont sous ie7 nous avons jamais corrigé ce bug.


après inspection j'ai sous firefox header width a 40px et colonne à 40px par exemple tandis que sous ie 7 je vais avoir le header à 39px et la colonne a 41px par exemple.


j'ai déjà essayé en supprimant mes autre js et css donc en laissant juste ext-all.js et ext-all.css