[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

Code:

---

                                            <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 :

Code:

---


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 && !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

Hi,

please see https://examples1.ext.net/#/Layout/B..._Region_Image/

Hi sz_146,



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


Example

Code:

---

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

---

Hope this helps.

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 :)

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:

Code:

---

        var setCollapesedTitle = function(panelID, title) {
            var oPanel = document.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!

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!