How to set the flex of an item at runtime?

Hi,

I have a hidden component, which when a togglebutton is on, is displayed.
Now, on it's displaying, I want to rearrange the flex of all the items, but the container seems to have no setFlex method.

I found a setItemFlex() method, but it gave error, maybe I used it wrong.

Any guidance how to do change flex at runtime?

Regards

Here is an example using Touch 2.1. Every tap of the button docked at the bottom will increase the flex value of the left panel by 1.

MyApp.view.Main:

Code:

---

Ext.define('MyApp.view.Main', {
    extend: 'Ext.Container',
    xtype: 'main',


    config: {
        layout: 'hbox',
        defaults: {
            flex: 1
        },
        items: [
            {
                itemId: 'leftPanel',
                html: 'left',
                style: {
                    backgroundColor: 'red'
                }
            },
            {
                itemId: 'rightPanel',
                html: 'right',
                style: {
                    backgroundColor: 'blue'
                }
            },
            {
                xtype: 'button',
                text: 'set flex',
                docked: 'bottom',
                action: 'setFlex'
            }
        ]
    }
});

---

MyApp.controller.Main:

Code:

---

Ext.define('MyApp.controller.Main', {
  extend: 'Ext.app.Controller',


  config: {
      refs: {
        leftPanel: '#leftPanel'
      },
      control: {
        'button[action=setFlex]': {
            tap: 'handleSetFlex'
        }
      }
  },


  handleSetFlex: function(btn) {
      var p = this.getLeftPanel();
      p.setFlex(p.getFlex() + 1);
  }
});

---

If you can't get this to work in your code, post the relevant snippets so we can help you troubleshoot.

Brice

Thanks..This works fine for 2.1. Is there any workaround for 2.0.1?