1. #1
    Ext User
    Join Date
    Mar 2009
    Posts
    5
    Vote Rating
    0
    singha is on a distinguished road

      0  

    Default Title on Collapsed Panel in Border Layout

    Title on Collapsed Panel in Border Layout


    We are using typical border layout. When we collapse south panel, it does not show any title. Therefore, it is hard for the user to know about contents of south panel (contents of south panel change dynamically in our application).

    We have looked various examples in ExtJS. We did not find any example where title is being displayed for collapsed south panel.

    Will appreciate any help in the problem!

  2. #2

  3. #3

  4. #4
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Yeah, i need to rework that thing out and make a plugin. it's really ugly.

  5. #5
    Ext User
    Join Date
    Mar 2009
    Posts
    5
    Vote Rating
    0
    singha is on a distinguished road

      0  

    Default


    Thanks you all!
    We implemented the solution suggested by Animal because it was simple

    Ext.layout.BorderLayout.Region.prototype.getCollapsedEl = Ext.layout.BorderLayout.Region.prototype.getCollapsedEl.createSequence(function()
    {
    if
    ( ( this.position == 'south' ) && !this.collapsedEl.titleEl )
    {
    this
    .collapsedEl.titleEl = this.collapsedEl.createChild({cls: 'x-collapsed-title', cn: this.panel.title});
    }
    });

    After we have the titleEl element now, we set the title on the collapsed panel dynamically

    Ext.getCmp('workload-panel').layout.south.getCollapsedEl().titleEl.dom.innerHTML = 'Case Information for: ' + caseName;

  6. #6
    Ext User
    Join Date
    Jun 2009
    Posts
    16
    Vote Rating
    0
    mpelzsherman is on a distinguished road

      0  

    Default


    Thanks singha - I tried this and the title text shows up, but the CSS doesn't work for me. I can't find the definition of 'x-collapsed-title' anywhere. Tried some other classes that DO exist (e.g. 'x-panel-header-text'), to no avail. Can anybody help?

  7. #7
    Ext User
    Join Date
    Mar 2009
    Posts
    5
    Vote Rating
    0
    singha is on a distinguished road

      0  

    Default


    Here is an example. Just put it in your CSS file.

    .x-collapsed-title{color:#15428b;font:11px/15px tahoma,arial,verdana,sans-serif;padding:2px 5px;}

  8. #8
    Ext JS Premium Member devtig's Avatar
    Join Date
    Jan 2010
    Location
    Rotterdam, The Netherlands
    Posts
    389
    Vote Rating
    13
    devtig will become famous soon enough

      0