Threaded View

  1. 23 Nov 2012 1:20 AM #1
    Dbms
    Dbms is offline
    Sencha User
    Join Date
    Apr 2012
    Posts
    30
    Vote Rating
    0
    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
    Reply With Quote Reply With Quote
  2. Best Answer Posted by 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:
    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