ExtJS 4.1 Comment modifier la hauteur de l'en-tête du panneau de grille

Question

Je souhaite modifier la hauteur de l'en-tête Ext.grid.Panel.

La hauteur d'un en-tête de panneau de grille est définie de manière forcée à 28px.

1. Aucun paramètre SASS
2. configuration d'en-tête sur le panneau ne fonctionne pas pour moi
3. Modifier la hauteur des colonnes de la grille semble fonctionner lors de la configuration < 28px. 28px semble être le minimum.

C'est ce que j'ai jusqu'ici (et cela fonctionne), mais je n'aime pas la solution.

Ext.define('Ext.grid.Panel', { 
    listeners: { 
     beforerender: function (cmp, eOpts) { 
      cmp.headerCt.setHeight(25); 
     } 
    } 
}); 

En outre, les en-têtes de colonne semblent également être fixés à 28px. Si vous définissez la hauteur de l'en-tête sur 25, l'en-tête de colonne ne sera pas défini sur 25. Vous devez également le redéfinir dans scss/css. Sinon, vos menus d'en-tête de colonne afficheront la hauteur de 28px.

.x-column-header 
{ 
    height: 25px; 
} 

Cette solution ne fonctionne pas: Si vous faites glisser les en-têtes de colonne, en changeant la position d'index de la colonne, il se brisera -.-

conseillait?

Answer 1

Pour définir la hauteur des en-têtes de colonne, vous devez définir la hauteur après leur compilation. La valeur de hauteur pour la configuration de colonne ne fonctionne pas pour définir la hauteur < 28, mais fonctionne> 28.

J'ai trouvé que la modification de la hauteur après la compilation définit correctement la hauteur et permet de déplacer les colonnes (tout fonctionne Comme il se doit).

Ext.define('Ext.grid.Panel', { 
    listeners: { 
     beforerender: function (cmp, eOpts) { 
      cmp.columns[0].setHeight(25); 
     } 
    } 
}); 

Ma solution n'a pas pu l'utiliser car je crée une grille dynamique. Dans la partie dynamique de la grille j'utilise GRID.reconfigure(); - là en détruisant tout ce qui a été créé dans un état beforerender.

Ext.define('Ext.grid.Panel', { 
    listeners: { 
     reconfigure: function (cmp, eOpts) { 
      cmp.columns[0].setHeight(25); 
     } 
    } 
}); 

Les feux de la fonction reconfigure après la reconfiguration en est ainsi que je suis arrivé dans la reconfiguration dynamique du réseau.

Answer 2

Vous pouvez également utiliser des sous-styles SASS pour cette GridPanel et définir le 'ui' config:

ajouter ui:'custom-height-item' à votre config

@include extjs-panel-ui(
    'custom-height-item', 
    $ui-header-line-height: 28px, 
    $ui-header-padding: 2px; 
    )