1. #1
    Sencha User
    Join Date
    Oct 2011
    Location
    Cincinnati, Ohio
    Posts
    6
    Vote Rating
    0
    charCo is on a distinguished road

      0  

    Default Unanswered: Accordion Header - Move collapse button to left of header title

    Unanswered: Accordion Header - Move collapse button to left of header title


    I am using an accordion layout to place two grid panels above each other and are on the right side of the page. Our UX designer wants the collapse/expand button to be at the left of the header instead of the right because he feels it is not intuitive to the user. I have attempted to override the accordion layout on render and modify the CSS, however the styles are being applied at the element level and I haven't been able to move the button.

    Any suggestions or simple thing I am missing?

  2. #2
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    Because panel header always renders tools after its title, so you need to override this header behaviour. Below is my solution: override Ext.panel.Header.
    Code:
    Ext.define('OverridePanelHeader', {
        override: 'Ext.panel.Header',
        initComponent: function(){
            var me = this;
            me.callParent(arguments);
    
    
            if(me.toolFirst){
                var items = me.items.items;
                var title = items.splice(0, items.length - me.tools.length);
                me.items.items = items.concat(title);
            }
        }
    });
    To render tools on the left with this override, you should config panel header with toolFirst set to true. Example:
    Code:
    Ext.onReady(function(){
    
    
        Ext.define('OverridePanelHeader', {
            override: 'Ext.panel.Header',
            initComponent: function(){
                var me = this;
                me.callParent(arguments);
    
    
                if(me.toolFirst){
                    var items = me.items.items;
                    var title = items.splice(0, items.length - me.tools.length);
                    me.items.items = items.concat(title);
                }
            }
        });
        var item1 = Ext.create('Ext.Panel', {
            title: 'Accordion Item 1',
            html: '<empty panel>',
            cls:'empty'
        });
    
    
        var item2 = Ext.create('Ext.Panel', {
            title: 'Accordion Item 2',
            html: '<empty panel>',
            cls:'empty',
            header: {
                toolFirst: true
            }
        });
    
    
        var item3 = Ext.create('Ext.Panel', {
            title: 'Accordion Item 3',
            html: '<empty panel>',
            cls:'empty'
        });
    
    
        var item4 = Ext.create('Ext.Panel', {
            title: 'Accordion Item 4',
            titleAlign: 'right',
            html: '<empty panel>',
            cls:'empty',
            header: {
                toolFirst: true
            }
        });
    
    
        var accordion = Ext.create('Ext.Panel', {
            renderTo: Ext.getBody(),
            title: 'Accordion',
            collapsible: true,
            region:'west',
            margins:'5 0 5 5',
            split:true,
            width: 210,
            height: 400,
            layout:'accordion',
            items: [item1, item2, item3, item4]
        });
    });

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Location
    Cincinnati, Ohio
    Posts
    6
    Vote Rating
    0
    charCo is on a distinguished road

      0  

    Default


    The override code does work when the toolFirst condition can be passed! But I had to remove the condition to get things to work. This:

    Code:
    var item2 = Ext.create('Ext.Panel', {
    title: 'Accordion Item 2',
    html: '<empty panel>',
    cls:'empty',
    header: {
    toolFirst: true
    }
    });
    to apply the toolFirst parameter to the header causes an error and seems to not create the header correctly when trying to access the header and add this value.

    I am trying to add the "toolFirst: true" to a grid panel and haven't been able to get a hold of the header to apply that value.

  4. #4
    Sencha User
    Join Date
    Oct 2011
    Location
    Cincinnati, Ohio
    Posts
    6
    Vote Rating
    0
    charCo is on a distinguished road

      0  

    Default


    I have even tried to extend the panel header and add it as an xtype to the header config of the panel. But I am still getting this error anytime I try to use the header config.

    Using this:
    Code:
    header: {....}
    config of the panel I get this error:

    Code:
    me.header.setUI is not a function

  5. #5
    Sencha - Community Support Team
    Join Date
    Jan 2012
    Posts
    1,376
    Vote Rating
    115
    Answers
    346
    vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold vietits is a splendid one to behold

      0  

    Default


    Which Ext version do you use? The solution and example I posted in my previous post ran well on Ext 4.1.0, Chrome 19.

  6. #6
    Sencha User
    Join Date
    Oct 2011
    Location
    Cincinnati, Ohio
    Posts
    6
    Vote Rating
    0
    charCo is on a distinguished road

      0  

    Default


    I am using ExtJs 4.1 beta 2 and using in Firefox 11. It is a company wrapper of the code, which is limiting the flexibility.

    I have been trying to apply this to grid panels, I will try basic panels to see if that will work. Then maybe resort to wrapping a panel around the grid panels. Or for now I will hold off until they upgrade their release to the non-beta version.

  7. #7
    Sencha User
    Join Date
    Jul 2011
    Location
    San Francisco, CA
    Posts
    103
    Vote Rating
    5
    Answers
    2
    alicexyl is on a distinguished road

      0  

    Default


    I'm using Ext 4.1.0 and ran into a similar issue, where specifying any header config and closable: true causes unexpected error, i.e. it has issues even without override. Filed a bug here: http://www.sencha.com/forum/showthre...Model&p=793779

  8. #8
    Sencha User
    Join Date
    Jul 2011
    Location
    San Francisco, CA
    Posts
    103
    Vote Rating
    5
    Answers
    2
    alicexyl is on a distinguished road

      0  

    Default


    I noticed that the collapse button still has element style left: 2px applied. Any suggestions on removing this so the button is better positioned?

  9. #9
    Sencha User
    Join Date
    Jun 2012
    Location
    Minneapolis, MN
    Posts
    1
    Vote Rating
    -1
    nohemi.feltl is an unknown quantity at this point

      -1  

    Default This solved it for me, so I thought I would share.

    This solved it for me, so I thought I would share.


    I tried the code that was posted before but it didn't work for me, probably because the version of Extjs that we use is 3.2. So if anybody using the same version is looking for the answer, thought I would share it.

    var item2 = new Ext.Panel({
    title: this.titleTwo,
    html: this.textTwo,
    cls:'empty',
    listeners: {'afterrender' : function(p) {

    var header = p.header;
    var firstelement = header.first();
    var lastelement = header.last();
    lastelement.move("r",40,true); //text label
    firstelement.move("l",850,true); //expand sign

    }}
    });

  10. #10
    Sencha User
    Join Date
    Jul 2012
    Posts
    1
    Vote Rating
    0
    adgpt is on a distinguished road

      0  

    Default Through CSS

    Through CSS


    Add the following class in your css file.The buttons will come to the left side.

    -accordion-hd > .x-panel-header-body > .x-box-inner > .x-box-item{left: 15px!important; }

    Modify the 15px value if you need. Thanks.