Results 1 to 3 of 3

Thread: How to set the flex of an item at runtime?

Threaded View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Sencha User
    Join Date
    Apr 2012
    Vote Rating

    Default Answered: How to set the flex of an item at runtime?


    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?


  2. 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.

    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'
    Ext.define('MyApp.controller.Main', {
       extend: '',
       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.


Posting Permissions

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