Results 1 to 4 of 4

Thread: Panel header. How change?

  1. #1
    Ext User
    Join Date
    Jul 2010
    Posts
    20

    Default Panel header. How change?

    For example, I want to change the Panel header - change style, add a picture or other HTML tags.
    Where do I start? What is my first step?
    I found the Panel property headerCfg. I'm on the right track?

    Here is what I got to do:
    Code:
    new Ext.Panel({
        title    : 'Panel',
        region    : 'west',
        width    : 200,
        headerCfg: {
            tag: 'img',
            src: './resources/images/1.gif'
            }
    })
    In this example, I see a changed header.

    but...
    Code:
    new Ext.Panel({
        title    : 'Panel',
        region    : 'west',
        width      :200, 
        headerCfg: {
            tag: 'div',
            cls: 'x-panel-header',
            cn: [
                        {
                    tag: 'img',
                    src: './resources/images/1.gif'
                }
            ]},
    })
    I see default header, but not see <img>... what wrong?

  2. #2
    Sencha User
    Join Date
    Oct 2010
    Location
    Vitoria-Gasteiz (Spain)
    Posts
    55

    Default

    I have the same problem. have you found anything?

  3. #3
    Sencha User Animal's Avatar
    Join Date
    Mar 2007
    Location
    Bédoin/Nottingham
    Posts
    30,890

    Default

    Have you debugged?

  4. #4
    Sencha User Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246

    Default

    The header title replaces the header content by default. You need to use:
    Code:
    new Ext.Panel({
        //title: 'Panel', <- Moved to headerCfg
        region: 'west',
        width: 200,
        headerAsText: false,
        headerCfg: {
            tag: 'div',
            cls: 'x-panel-header',
            cn: [{
                tag: 'img',
                src: './resources/images/1.gif'
            },{
                // Optional, if you also want a title
                tag: 'span',
                cls: 'x-panel-header-text',
                cn: 'Panel'
            }]
        }
    })

Similar Threads

  1. Replies: 1
    Last Post: 3 Nov 2010, 3:02 AM
  2. change Ext.Panel header style dynamic
    By Snaker in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 10 May 2010, 12:29 AM
  3. Change header visibility of a panel before render
    By ngocluu in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 9 Oct 2008, 1:59 AM
  4. [2.0] can't change the icon in a panel header
    By jonesmc123 in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 11 Dec 2007, 1:18 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •