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 force à 28 px.
- Pas de paramètres audacieux
- La configuration de l'en-tête sur le panneau n'a pas fonctionné pour moi
- La modification de la hauteur des colonnes de la grille semble fonctionner lors de la configuration < 28 px.28px semble être le minimum.
C'est ce que j'ai jusqu'à présent (et ça marche), mais je n'aime pas la solution.
Ext.define('Ext.grid.Panel', {
listeners: {
beforerender: function (cmp, eOpts) {
cmp.headerCt.setHeight(25);
}
}
});
De plus, les en-têtes de colonnes semblent également être fixés à 28 px.Définir la hauteur de l'en-tête sur 25 ne définira pas l'en-tête de la colonne sur 25.Vous devez également remplacer cela dans le fichier scss / css.Sinon, les menus d'en-tête de colonne s'afficheront sur une hauteur de 28 px.
.x-column-header
{
height: 25px;
}
Cette solution ne fonctionne pas :Si vous faites glisser les en-têtes de colonnes, en modifiant la position d'index de la colonne, cela se brisera -.-
Des recommandations ?
La solution
Pour définir la hauteur des en-têtes de colonne, vous devez définir la hauteur après leur compilation.Encore une fois, la valeur de hauteur de la configuration de la colonne ne fonctionne pas pour définir la hauteur <28, mais fonctionne> 28.
J'ai trouvé que modifier la hauteur après la compilation définit correctement la hauteur et permet aux colonnes d'être glagibles (tout fonctionne comme il devrait).
Ext.define('Ext.grid.Panel', {
listeners: {
beforerender: function (cmp, eOpts) {
cmp.columns[0].setHeight(25);
}
}
});
Ma solution ne pouvait pas 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éé sur un état Beforerender.
Ext.define('Ext.grid.Panel', {
listeners: {
reconfigure: function (cmp, eOpts) {
cmp.columns[0].setHeight(25);
}
}
});
La fonction reconfigurante incendie après la reconfiguration, il s'agit donc de la reconfiguration de la grille dynamique.
Autres conseils
Vous pouvez également utiliser des sous-styles sass pour ce panneau de grille et définir la configuration « ui » :
ajouter ui:'custom-height-item'
à votre configuration
@include extjs-panel-ui(
'custom-height-item',
$ui-header-line-height: 28px,
$ui-header-padding: 2px;
)