Modifier la Hauteur d'un ExtJS 4 Tab

Contexte: je suis en train d'écrire une application ExtJS pour aider les bénévoles à gérer un camp de base de données. Contenant de l'information d'urgence, les besoins nutritionnels et de la cabine de l'allocation. Je veux qu'il soit convivial afin que les volontaires prendront rapidement, j'ai donc décidé de les onglets doivent être plus pour attirer l'attention sur le principales actions de l'application.

Problème: je ne sais pas comment changer la hauteur tab.

Travail:

  • J'ai essayé de réglage de la tabBar propriété de mon panneau d'onglets, mais les onglets n'ont pas de redimensionnement et le style juste regardé bizarre
  • J'ai regardé à travers les forums et les gens a suggéré de modifier le CSS, mais il y avait pas d'exemples

Pouvez-vous aider? C'est ce que je veux atteindre:

http://tinypic.com/r/sltr9g/7

http://postimage.org/image/10x22n8ec/

OriginalL'auteur Cain | 2011-08-30

  1. 13

    Je crois que j'ai trouvé une solution!

    Vous assurer que vous avez défini la " cls " la propriété de la Poste.onglet.Panneau que vous utilisez, puis collez le texte suivant dans votre fichier CSS spécifique.

    .MainPanel .x-tab-bar-strip {
    top: 40px !important; /* Default value is 20, we add 20 = 40 */
}

.MainPanel .x-tab-bar .x-tab-bar-body {
    height: 43px !important; /* Default value is 23, we add 20 = 43 */
    border: 0 !important; /* Overides the border that appears on resizing the grid */
}

.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner {
    height: 41px !important; /* Default value is 21, we add 20 = 41 */
}

.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab {
    height: 41px !important; /* Default value is 21, we add 20 = 41 */
}

.MainPanel .x-tab-bar .x-tab-bar-body .x-box-inner .x-tab button {
    height: 33px !important; /* Default value 13, we add 20 = 33 */
    line-height: 33px !important; /* Default value 13, we add 20 = 33 */
}

    Remarque: les onglets de plus grand et de moyen-aligne le texte, mais, idéalement, l'icône serait également être moyen-alignés.

    Vous aurez besoin d'ajouter "MainPanel" comme classe dans votre TabPanel définition.
    Extrêmement utile-merci d'avoir pris le temps de poster votre propre réponse.

    OriginalL'auteur Cain

  2. 2

    À l'aide de nouveau ExtJS 4 thématisation avec Boussole, vous pouvez simplement mettre:

    $tab-height: 40px !default;

    dans appname/resources/sass/my-ext-theme.scss.

    Le seul problème que vous rencontrerez est de l'espace supplémentaire au-dessous de la barre des onglets bug, qui apparaît toujours lors de l'utilisation d'un thème personnalisé. Mais ce problème peut être résolu facilement, comme l'a expliqué il y a, en définissant dans l'une de vos CSS: 

    .x-tab-bar
{
    position: absolute;
}

    Dans resources/themes/stylesheets/ext4/default/variables/_tabs.scss fichier dans ExtJS package, vous pouvez trouver d'autres variables utiles à l'onglet personnaliser la taille et la couleur.

    OriginalL'auteur jan

  3. 0

    Si vous utilisez extjs4 ne l'utilisation de SASS et Compass pour faire tout changements dans la extjs de la feuille de style.

    Vous pouvez simplement ajouter en dessous de la variable dans mon-custom-thème.scss pour modifier la hauteur de l'onglet:

    $tab-height: 40px;
    Quoi qu'il ajoute à l'détaillée et a accepté de répondre?

    OriginalL'auteur help