1. #1
    Sencha User dorgan's Avatar
    Join Date
    Dec 2007
    Location
    Cocoa, FL
    Posts
    286
    Vote Rating
    -1
    dorgan is an unknown quantity at this point

      0  

    Default Unanswered: Changing Ext.panel.Header Size

    Unanswered: Changing Ext.panel.Header Size


    I have figured out via CSS how to change the font size of a Panel Header. And I was able to create a custom Ext.panel.Header and set the height, however that does not seem to be effecting everything it should.

    So what is the proper way of changing the Ext.panel.Header height?

  2. #2
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,684
    Answers
    130
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    hi donald,

    panel headers do not use a heigth style directly. in SASS you have a variable to change the padding which works nice for this:

    Code:
    $panel-header-padding : 10px !default;
    you can change only top and bottom padding to get the effect.

    this affects the css:
    Code:
    .x-panel-header {
        padding: 10px;
    }


    best regards
    tobias
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  3. #3
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,347
    Answers
    3542
    Vote Rating
    846
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You can use setHeight on the header if you so choose too.

    Code:
    Ext.create('Ext.panel.Panel', {
        renderTo : Ext.getBody(),
        width    : 400,
        height   : 400,
        title    : 'HI',
        html     : 'Hello',
        
        listeners : {
            afterrender : function(panel) {
                var header = panel.header;
                header.setHeight(100);
            }
        }
    });
    Or specify your own as a config (header)
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha User nextSTEP's Avatar
    Join Date
    Sep 2010
    Posts
    36
    Answers
    1
    Vote Rating
    0
    nextSTEP is on a distinguished road

      0  

    Default


    Hi dorgan, how did you specify the font-size for the panel header?

    I hope you didn't do this via inline CSS setting HTML like this: <span style="font-size:20pt;">Title</span>

    I'm looking for a solution that let's me do this via CSS class. Someone who knows?

  5. #5
    Sencha User
    Join Date
    Dec 2008
    Posts
    2
    Vote Rating
    0
    rgaston is on a distinguished road

      0  

    Default


    nextSTEP:

    I got what you described working as follows...

    CSS:
    Code:
    .my-panel .x-panel-header {
         height: 32px; 
    }
    .my-panel .x-panel-header-text {
         font-size:15px;
    }
    .my-panel .x-panel-header-body {
          height: 20px;
    }
    /*------------------------------
    Hack to make this work in IE (8 at least) 
    (framed header collapses at a height of n+4)
    --------------------------------*/
    .x-ie .my-panel .x-panel-header-body {
        height: 28px;
    }

    JavaScript:
    Code:
    Ext.create('Ext.panel.Panel', {
         title: 'My Panel',
         cls: 'my-panel'
         // rest of panel config...
    });
    Last edited by rgaston; 31 Oct 2011 at 12:21 PM. Reason: fixed this to work in IE

  6. #6
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    0
    hest is on a distinguished road

      0  

    Default


    3Q
    you have tell how to deal with things like this
    3Q

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Posts
    2
    Vote Rating
    0
    hest is on a distinguished road

      0  

    Default


    Quote Originally Posted by rgaston View Post
    nextSTEP:

    I got what you described working as follows...

    CSS:
    Code:
    .my-panel .x-panel-header {
         height: 32px; 
    }
    .my-panel .x-panel-header-text {
         font-size:15px;
    }
    .my-panel .x-panel-header-body {
          height: 20px;
    }
    /*------------------------------
    Hack to make this work in IE (8 at least) 
    (framed header collapses at a height of n+4)
    --------------------------------*/
    .x-ie .my-panel .x-panel-header-body {
        height: 28px;
    }

    JavaScript:
    Code:
    Ext.create('Ext.panel.Panel', {
         title: 'My Panel',
         cls: 'my-panel'
         // rest of panel config...
    });
    3Q

  8. #8
    Sencha User jdflores's Avatar
    Join Date
    Aug 2011
    Posts
    18
    Vote Rating
    3
    jdflores is on a distinguished road

      0  

    Default header property

    header property


    Also you can try with the header property:

    header : {
    height : 50
    },

  9. #9
    Sencha User
    Join Date
    May 2013
    Location
    Pakistan
    Posts
    9
    Vote Rating
    0
    theraaaz is on a distinguished road

      0  

    Default Not working

    Not working


    Code:
     header : {
                height : 10
            }
    It not worked for me. Header title disappeared and items gone under header..extjs header height.png