1. #1
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
    kimonp is on a distinguished road

      0  

    Default Answered: Objects in title section of accordion container?

    Answered: Objects in title section of accordion container?


    Is it possible to put objects in the title bar of each section of an accordion container?

    I'd like to for example have a select menu in each section of my accordion as per below:

    foo: <menu>
    grid foo row 1
    grid foo row 2
    bar: <menu>
    grid bar row 1
    grid bar row 2
    grid bar row 3

  2. Something like this what you're looking for?

    Code:
    Ext.create('Ext.panel.Panel', {
        title: 'Accordion Layout',
        width: 300,
        height: 300,
        defaults: {
            // applied to each contained panel
            bodyStyle: 'padding:15px'
        },
        layout: {
            // layout-specific configs go here
            type: 'accordion',
            titleCollapse: false,
            animate: true,
            activeOnTop: true
        },
        items: [{
            title: 'Panel 1',
            html: 'Panel content!',
            collapseFirst: false,
            tools: [{
                xtype: 'button',
                text: 'Menu 1'
            }, {
                xtype: 'button',
                text: 'Menu 2'
            }]
        },{
            title: 'Panel 2',
            html: 'Panel content!'
        },{
            title: 'Panel 3',
            html: 'Panel content!'
        }],
        renderTo: Ext.getBody()
    });

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,468
    Answers
    441
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      1  

    Default


    Something like this what you're looking for?

    Code:
    Ext.create('Ext.panel.Panel', {
        title: 'Accordion Layout',
        width: 300,
        height: 300,
        defaults: {
            // applied to each contained panel
            bodyStyle: 'padding:15px'
        },
        layout: {
            // layout-specific configs go here
            type: 'accordion',
            titleCollapse: false,
            animate: true,
            activeOnTop: true
        },
        items: [{
            title: 'Panel 1',
            html: 'Panel content!',
            collapseFirst: false,
            tools: [{
                xtype: 'button',
                text: 'Menu 1'
            }, {
                xtype: 'button',
                text: 'Menu 2'
            }]
        },{
            title: 'Panel 2',
            html: 'Panel content!'
        },{
            title: 'Panel 3',
            html: 'Panel content!'
        }],
        renderTo: Ext.getBody()
    });
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  4. #3
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
    kimonp is on a distinguished road

      0  

    Default


    Yes, that's what I was looking for-- but there is still one issue. When I click on a menu in the title bar, it collapses or expands the title bar as well as selecting the menu. Is there a way to stop this mouse click if it is handled by a button in the tool bar?

    Thanks!!!

  5. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,468
    Answers
    441
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      1  
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

  6. #5
    Sencha User
    Join Date
    Feb 2013
    Posts
    4
    Vote Rating
    0
    kimonp is on a distinguished road

      0  

    Default


    Ok, yes I was-- so that will work, thanks.

    I don't suppose there is a way to keep titleCollapse on, but yet have it respect when tools are clicked?

  7. #6
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,468
    Answers
    441
    Vote Rating
    202
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      1  

    Default


    Probably the best way will be to set a beforecollapse listener on the child panels in the layout and use the eventObject's getTarget() method to see if the title / header was clicked on and return true or if a tool / button was clicked on and if so return false.
    Are you a Sencha products veteran who has wondered what it might be like to work at Sencha? If so, please reach out to our recruiting manager: sheryl@sencha.com

Thread Participants: 1

Tags for this Thread