1. #1
    Sencha Premium Member
    Join Date
    Jul 2011
    Location
    Belgium
    Posts
    2
    Vote Rating
    0
    mushe is on a distinguished road

      0  

    Default Unanswered: side collapse as in documentation

    Unanswered: side collapse as in documentation


    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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,344
    Answers
    3541
    Vote Rating
    847
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha Premium Member
    Join Date
    Jul 2011
    Location
    Belgium
    Posts
    2
    Vote Rating
    0
    mushe is on a distinguished road

      0  

    Default still confused

    still confused


    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.

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

Thread Participants: 1

Tags for this Thread