Threaded View

  1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    34
    Vote Rating
    1
    Dbms is on a distinguished road

      0  

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

    Answered: 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

  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.

    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

Thread Participants: 1