How to set the flex of an item at runtime?

[Dbms]

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

[bricemason]

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:

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:

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

[Dbms]

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