1. #1
    Ext JS Premium Member
    Join Date
    Oct 2011
    Posts
    84
    Vote Rating
    0
    Webtel is on a distinguished road

      0  

    Exclamation Answered: how to "float in" a collapsed floatable panel?

    Answered: how to "float in" a collapsed floatable panel?


    How can i make below floating panel to float in (slide in,show) using script (and not by clicking on placeholder)?

    Code:
    Ext.create('Ext.Window',{    autoShow:true,
        width:700,
        autoDestroy:true,
        height:500,
        layout:'border',
        items:[{
            region:'center',
            html:'i need to be laid all the time - dont touche me or resize. thats the point'
        },{
            region:'east',   
            collapsed:true,
            collapsible:true,frame:true,border:true,
            hideCollapseTool:true,
            title:'floating panel'
            html:'I want to be collapsed on start. i never want to be "expanded" rather float over previous sibling.',
            width:500,
            floatable:true,
            xtype:'form',
            resizable:false
        }]
    });
    PS. panel.expand() is not an answer (it wont be floating anymore).

    PS.2. or just How can i fire click event on placeholder (header).

  2. ON the border layout in 4.0.x, there is a method, floatCollapsedPanel that takes two arguments. The first is a tricky one as it wants an EventObject and the second is the component.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,616
    Answers
    3450
    Vote Rating
    818
    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


    ON the border layout in 4.0.x, there is a method, floatCollapsedPanel that takes two arguments. The first is a tricky one as it wants an EventObject and the second is the component.
    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.

  4. #3
    Ext JS Premium Member
    Join Date
    Oct 2011
    Posts
    84
    Vote Rating
    0
    Webtel is on a distinguished road

      0  

    Default my applogy - i was wrong - You can be realy helpful if you want - thankyou :)

    my applogy - i was wrong - You can be realy helpful if you want - thankyou :)


    for now working example looks like this:

    Code:
    Ext.getCmp('my1').getLayout().floatCollapsedPanel(Ext.EventObject,Ext.getCmp('my2'));
    Code:
    Ext.create('Ext.Window',{
        autoShow:true,
        width:700,
    	autoDestroy:true,
        height:500,
        id:'my1',
        layout:'border',
        items:[{
            region:'center',
            html:'i need to be laid all the time - dont touche me or resize. thats the point'
        },{
    		region:'east',
    		id:'my2',   
    		collapsed:true,
    		collapsible:true,frame:true,border:true,
    		hideCollapseTool:true,
    		title:'floating panel',
    		html:'I want to be collapsed on start. i never want to be "expanded" rather float over previous sibling.',
    		width:500,
    		floatable:true,
    		xtype:'form',
    		resizable:false
        }]
    });