1. #1
    Sencha User
    Join Date
    Aug 2012
    Posts
    33
    Vote Rating
    0
    Answers
    2
    alane is on a distinguished road

      0  

    Default Answered: Configure collapse control for panels

    Answered: Configure collapse control for panels


    I'm looking for a way to configure panels so that the collapse tool that appears with collapsible: true renders on the left hand side of the panel, before the title object.

    There's a hacky way suggested under collapseFirst on Ext.panel.Panel's documentation page, but this can adversely impact render time if you're rendering a lot of collapsible panels at the same time.

    Is there, or are there plans to develop, something like a collapseAlign configuration?

  2. ..ok. I do believe I got it looking at Ext.panel.Header.

    for anybody else looking into this, my solution was:

    Code:
    Ext.define('myapp.view.repeatingpanel', {
        extend: 'Ext.form.Panel',
        collapsible: true,
        header: {        
            listeners: {
              beforerender: function(header) {
                  var collapsetool = header.tools[0];
                  header.insert(0,collapsetool);
                  //this.log('before render',header);
              },
          }
        }

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


    If you want total control, you can add an item to the header, the header is a container using hbox layout.
    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
    Sencha User
    Join Date
    Aug 2012
    Posts
    33
    Vote Rating
    0
    Answers
    2
    alane is on a distinguished road

      0  

    Default


    Would I need to replace the collapse tool with a tool of my own that mimics it, or could I specify the native items in the order I want them using the header configuration?

    How would I do that? (Specify the order of the native items, like the title component, collapse tool, etc?)

    header: {
    collapsetool,
    title
    }

  5. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    33
    Vote Rating
    0
    Answers
    2
    alane is on a distinguished road

      0  

    Default


    ..ok. I do believe I got it looking at Ext.panel.Header.

    for anybody else looking into this, my solution was:

    Code:
    Ext.define('myapp.view.repeatingpanel', {
        extend: 'Ext.form.Panel',
        collapsible: true,
        header: {        
            listeners: {
              beforerender: function(header) {
                  var collapsetool = header.tools[0];
                  header.insert(0,collapsetool);
                  //this.log('before render',header);
              },
          }
        }

Thread Participants: 1

Tags for this Thread