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

  3. #2
    Sencha User bricemason's Avatar
    Join Date
    Jan 2008
    Location
    Upstate NY
    Posts
    280
    Answers
    49
    Vote Rating
    44
    bricemason has a spectacular aura about bricemason has a spectacular aura about bricemason has a spectacular aura about

      0  

    Default


    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
    Brice Mason
    Front End Developer
    Modus Create

    @bricemason
    bricemason.com

    Sencha Touch Screencasts
    Vimeo - Sencha Touch Channel

    Github Projects:
    Sencha Cordova Builder enables the automatic creation, building, and running of PhoneGap (Cordova) projects with Sencha Touch.

    Am I Sencha Touch Ready? checks your system to determine what you need to do to start Sencha Touch development. If you're having trouble getting up and running, try this out.

    Sencha Tools Bridge allows Sencha SDK Tools to co-exist with Sencha Cmd on the same system.

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

      0  

    Default


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

Thread Participants: 1