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,010
    Answers
    384
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  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,010
    Answers
    384
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

  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,010
    Answers
    384
    Vote Rating
    183
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      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

    C
    heck out all of the 2013 SenchaCon presentations here:
    http://www.sencha.com/blog/senchacon...now-available/

Thread Participants: 1

Tags for this Thread