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,663
    Answers
    130
    Vote Rating
    110
    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
    35,710
    Answers
    3357
    Vote Rating
    751
    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
    2
    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

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar