[CLOSED] Collapsed title of South Panel

  1. #1

    [CLOSED] Collapsed title of South Panel

    Any one knows if there is a way to show the title of a collapsed horizontal panel e.g. South or North. I have found an extension on Ext forum for it but I thought there might be a way in coolite. Also how do I add a custom plugin to my South panel for example :

    The South Panel
                                                <South>
                                                    <ext:Panel ID="Panel5" Collapsible="true" Collapsed="true" runat="server" Height="200" Title="Question Libraries">
                                                        <Plugins>
                                                            <ext:GenericPlugin runat="server" InstanceOf="Ext.ux.collapsedPanelTitlePlugin()"></ext:GenericPlugin>
                                                        </Plugins>
                                                        <Content>
                                                        </Content>
                                                    </ext:Panel>
                                                </South>
    Doesn't work.

    The plugin :

    
    Ext.ux.collapsedPanelTitlePlugin = function() {
        this.init = function(p) {
            if (p.collapsible) {
                var r = p.region;
                if ((r == 'north') || (r == 'south')) {
                    p.on('render', function() {
                        var ct = p.ownerCt;
                        ct.on('afterlayout', function() {
                            if (ct.layout[r].collapsedEl) {
                                var leftPadding = (p.collapsedIcon ? 24 : 4);
                                var background = (p.collapsedIcon ? "url('" + p.collapsedIcon + "') no-repeat left center;" : "transparent;");
                                p.collapsedTitleEl = ct.layout[r].collapsedEl.createChild({
                                    tag: 'div',
                                    style: 'padding-left:' + leftPadding + 'px; margin-left:4px; margin-top:2px; background:' + background,
                                    cls: 'x-panel-collapsed-text',
                                    html: p.collapsedTitle
                                });
                            }
                        }, false, { single: true });
                        p.on('collapse', function() {
                            if (ct.layout[r].collapsedEl &amp;&amp; !p.collapsedTitleEl) {
                                var leftPadding = (p.collapsedIcon ? 24 : 4);
                                var background = (p.collapsedIcon ? "url('" + p.collapsedIcon + "') no-repeat left center;" : "transparent;");
                                p.collapsedTitleEl = ct.layout[r].collapsedEl.createChild({
                                    tag: 'span',
                                    style: 'padding-left:' + leftPadding + 'px; margin-left:4px; margin-top:2px; background:' + background,
                                    cls: 'x-panel-collapsed-text',
                                    html: p.collapsedTitle
                                });
                            }
                        }, false, { single: true });
                    });
                }
            }
        };
    } // eo collapsedPanelTitlePlugin
    Thanks
  2. #2

    RE: [CLOSED] Collapsed title of South Panel

    Last edited by geoffrey.mcgill; Feb 20, 2011 at 1:06 PM.
  3. #3

    RE: [CLOSED] Collapsed title of South Panel

    Hi sz_146,



    You should just point the InstanceOf property to the function/plugin name. You shouldn't require the brackets.*


    Example


    <ext:GenericPlugin runat="server" InstanceOf="Ext.ux.collapsedPanelTitlePlugin">

    Hope this helps.


    Geoffrey McGill
    Founder
  4. #4

    RE: [CLOSED] Collapsed title of South Panel

    Thank you guys. I tried using the plugin but it complained Ext.ux....... is not a constructor. Now I am using the technique Vladsch has pointed to and it works fine. Also I think this is a better approach as it takes less code and neater. Thank you once again. Any idea when 0.7 is getting released :)
  5. #5

    RE: [CLOSED] Collapsed title of South Panel

    I ran into this thread and thought I'd provide my solutions.
    I also wanted to have a TEXT collapsed title (sorry using graphic image doesn't cut for me) and found an easy solution using CSS/DOM Instead of going through the hassle of plugins.

    I've noticed all the collapsed panels have {PanelName}-xcollapsed as DOM ID. So I made a little function and call it when the panel is ready:
            var setCollapesedTitle = function(panelID, title) {
                var oPanel = &#100;ocument.getElementById(panelID+ "-xcollapsed");
                oPanel.innerHTML = "" + title + " " + oPanel.innerHTML;
            }
    It's a cheap trick to modify the innerHTML of the collapsed title bar to include title string. It's a kind of hack relying on the coolite's naming convention, but works for me!

  6. #6

    RE: [CLOSED] Collapsed title of South Panel

    Hmmm.. I've realized that this kinda breaks panel collapsing so that it's always set to auto-hide and cannot lock it into a split section.

    I've come up with another solution to have a fixed panel (let's call it Panel A) with collapsed height in the south and have a collapsible panel (Panel B) inside Panel A. Then we can set the collapse listener on Panel B and the handler would increase the height of Panel A and call doLayout on the window... reverse for expand event.

    It's kind of pseudo-collapse panel, but if anyone have a better idea, feel free to share!

Similar Threads

  1. [CLOSED] Expand collapsed panel
    By uniway in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Jan 15, 2013, 1:41 PM
  2. [CLOSED] South Panel rendering issue after gridPanel row select
    By Daly_AF in forum 1.x Legacy Premium Help
    Replies: 14
    Last Post: May 01, 2012, 9:47 AM
  3. Replies: 0
    Last Post: May 27, 2009, 6:50 AM
  4. [CLOSED] Collapsed Panel Title
    By randy85253 in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Apr 27, 2009, 1:03 PM
  5. Panel - Collapsed Title?
    By Tbaseflug in forum 1.x Help
    Replies: 5
    Last Post: Jan 21, 2009, 9:35 AM

Posting Permissions