side collapse as in documentation

[mushe]

Hallo,

I'm wondering how to get the collapse behaviour as it is in the Sencha documentation : a pannel (with the info of a property, method, or ...) has a little triangle at the left, and shows 2 lines in collapsed mode.

When you click on the triangle, the pannel is opened and a nice bar is at the left which you can click to collapse it again.

How to do this?

Thanks in advance,
Marc

[mitchellsimoens]

Have a panel that is collapsible, hide the collapse tool and add an icon to the header that shows the collapse icon you want and have that tool collapse/expand the panel.

[mushe]

Thank you, Micthell,

But I'm still confused. I think I need to set more properties, so have tried as in the following code. Yet this is not wat I want : I want to collapse it to show only 1 line of text, and expand to show all.

Ext.application({ 
    name: 'HelloExt', 
    launch: function() { 
        Ext.create('Ext.container.Viewport', { 
            id:'vwp', 
            layout: 'fit', 
            items: [ 
                { 
                    title: 'Hello Ext', 
                    html : 'Hello! Welcome to Ext JS.', 
                    id:"testPanel", 
                    styleHtmlContent:true 
                } 
            ] 
        }); 
 
 
    //test code starts here ----------------------- 
        Ext.create("Ext.panel.Panel", { 
            id: "testCollapseLeft", 
            closable: false, 
            collapsible: true, 
            titleCollapse: true, 
            height:200, 
            headerPosition: "left", 
            hideCollapseTool: true, 
            iconCls: "x-tbar-page-next", 
            html: Ext.util.Format.htmlDecode("test<br/> collapse<br/> left"), 
            styleHtmlContent:true 
        }); 
         
        Ext.getCmp('testPanel').add(Ext.getCmp('testCollapseLeft')); 
     
    //test code ends here ------------------------- 
    } 
});

What I get :
CollapseLeft.png

What I want is the arrow and bar left of autoRender (collapsed) and autoScroll (opened) :
DocCollapse.png