Results 1 to 6 of 6

Thread: Accordion layout question

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    16

    Default Answered: Accordion layout question

    Hi. I'm using the an accordion layout in a panel. I would like disable both the title collapse and the collapse tool and control the functionality from a button within the child components. Basically perform a validation of a form once the button is clicked and then expand the next item. Can this be accomplished? TIA


    Code:
    
     extend: 'Ext.panel.Panel',    
    renderTo: 'cart-table',    
    height: 350,    
    layout: {        
      type: 'accordion',        
      hideCollapseTool: true,        
      titleCollapse: false,        
      animate: true
    },    
    items:[{       
      title: 'Test',        
      xtype: 'form',        
      defaultType: 'textfield' ...    
    },{        
      title: 'Test1',
      xtype: 'form',
       defaultType: 'textfield' ...    
    }]...
    

  2. You would need to override the default behavior in Ext.layout.container.Accordion :: beforeRenderItems

    If you set hideCollapseTool to false, it changes the titleCollapse behavior

    Code:
    Ext.define('Ext.layout.container.override.Accordion', {
        override: 'Ext.layout.container.Accordion',
    
         beforeRenderItems: function (items) {
             // make changes
         }
    });

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    You would need to override the default behavior in Ext.layout.container.Accordion :: beforeRenderItems

    If you set hideCollapseTool to false, it changes the titleCollapse behavior

    Code:
    Ext.define('Ext.layout.container.override.Accordion', {
        override: 'Ext.layout.container.Accordion',
    
         beforeRenderItems: function (items) {
             // make changes
         }
    });

  4. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    16

    Default

    Thanks for the response. I don't see much documentation on overriding layouts. I have extended components before and created them from a controller by

    Code:
    var foo = Ext.create('my.extended.cmp');
    But I'm not really sure about how to properly use the layout once it is overridden. How do I then add it as a layout type to my panel? Any help or a link to some docs would be appreciated. Thanks.

  5. #4
    Sencha User
    Join Date
    Mar 2012
    Posts
    16

    Default

    Nevermind. I worked it out. I wasn't understanding that by overriding the accordion layout I was changing the functionality every time I used layout: 'accordion'. I created a seperate override file and included it in my page. Thanks for the help. Now just need to figure out how to actually achieve the functionality.

  6. #5
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,410
    Answers
    716

    Default

    The section to be concerned with in beforeRenderItems is

    Code:
                    if (comp.collapsible) {
                        if (hasCollapseFirst) {
                            comp.collapseFirst = collapseFirst;
                        }
                        if (me.hideCollapseTool) {
                            comp.hideCollapseTool = me.hideCollapseTool;
                            comp.titleCollapse = true;
                        } else if (me.titleCollapse && comp.titleCollapse === undefined) {
                            // Only force titleCollapse if we don't explicitly
                            // set one on the child panel
                            comp.titleCollapse = me.titleCollapse;
                        }
                    }
    Simply copy the entire function, make changes the to the code and then use the override. It will change the default behavior and override it with the changes.

  7. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    16

    Default

    Got it. Thanks for the help.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •