Utilisation des options groupHeader et de Flex dans une Grid ExtJS 4

J'utilise beaucoup le modèle MVC de ExtJs pour développer. Afin de ne pas perdre trop de temps au chargement de la page j'utilise le fichier ext-all-debug.js, ainsi seules les classes que j'écris sont chargées de façon dynamique.


Je viens de finir un projet et au moment des tests après avoir créé un fichier unique à partir d'un jsb3, ExtJs me retourne l'Exception suivante: Ext.grid.column.Column: items of a grouped header do not support flexed values. Each item must explicitly define its width.

 

Dans mon projet j'ai défini une Grid utilisant des Headers groupés et définissant la taille des colonnes avec Flex:

 
initComponent: function()
{
	this.columns = [{
		header: '<b>Rendez-vous</b>',
		columns: [{
			dataIndex: 'DATE_RDV',
		        header: 'Date RDV',
		        sortable: true,
		        flex: 1.5
			}, {
				dataIndex: 'CRENEAU',
		        header: 'Horaire',
		        sortable: true,
		        flex: 2
			}, {
				dataIndex: 'STATUT_RDV',
		        header: 'Statut',
		        sortable: true,
		        flex: 2
			}, {
				dataIndex: 'TYPE_INTER',
		        header: 'Type d\'intervention',
		        sortable: true,
		        flex: 2
			}, {
				dataIndex: 'NUM_RDV',
		        header: 'N&deg; Interv.',
		        sortable: true,
		        flex: 1
			}]
		}, {
			header: 'Prestataires',
			columns: [{
				dataIndex: 'AGENDA',
		        header: 'Agenda',
		        sortable: true,
		        flex: 2
			}, {
				dataIndex: 'TRI_REGION',
		        header: 'Region',
		        sortable: true,
		        flex: 2.5
			}, {
				dataIndex: 'TRI_TECHNICIEN',
		        header: 'Technicien',
		        sortable: true,
		        flex: 2
			}]
		}];
}

Avec le fichier ext-all-debug.js il n'y aucun problème dans la définition de la Grid. Mais avec le fichier ext.js ou ext-debug.js qui du coup demande le chargement du fichier ext/src/grid/column/Column.js c'est une autre histoire.
Le problème se trouve dans la méthode initComponent de la class Ext.grid.column.Column. Encadré par des balises <debug> (aucune idée de leur signification), se trouve des tests sur sur l'utilisation du Flex qui retournent des Ext.Error:

 
//Ligne: 273
//<debug>
if (me.dataIndex) {
    Ext.Error.raise('Ext.grid.column.Column: Group header may not accept a dataIndex');
}
if ((me.width && me.width !== Ext.grid.header.Container.prototype.defaultWidth) || me.flex) {
    Ext.Error.raise('Ext.grid.column.Column: Group header does not support setting explicit widths or flexs. The group header width is calculated by the sum of its children.');
}
//</debug>
 
//Ligne 294
//<debug>
if (item.flex) {
    Ext.Error.raise('Ext.grid.column.Column: items of a grouped header do not support flexed values. Each item must explicitly define its width.');
}
//</debug>

Ces tests ne sont pas présent dans le fichier ext-all-debug.js Un oublie surement, mais dans quel fichier?
il suffit donc de commenter ces lignes et relancer la commande build du sdk de ExtJs pour ne plus avoir l'erreur et pouvoir utiliser l'otpion flex avec des Header groupés. Testé sur FF10/11, Chrome et IE7/8 sans aucun bug.

Ajouter un commentaire