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.

1. Pas de paramètres audacieux
2. La configuration de l'en-tête sur le panneau n'a pas fonctionné pour moi
3. 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 ?

Answer 1

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.

Answer 2

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;
    )