Results 1 to 4 of 4

Thread: Who to dynamically add elements into a panel

  1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    65
    Answers
    8
    Vote Rating
    1
      0  

    Default Unanswered: Who to dynamically add elements into a panel

    Hi,

    I'm trying to add element to a panel. I can see the elements in the items array but they either not displayed at all or only one of them is displayed filling up the entire display.

    My panel is defined as:
    Code:
    Ext.define('WeFindEmulator.view.Main', {
        extend: 'Ext.Panel',
        xtype: 'Main',
        id: 'WeFindEmuMain',
        
        config: {
            fullscreen: true,
    
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Emulator Runner'
                }
            ]
        }
    });
    The element I'm trying to add is:
    Code:
    Ext.define('WeFindEmulator.view.MemberEmulator', {
        extend: 'Ext.Panel',
        xtype: 'MemberEmulator',
    
        config: {
            layout: 'vbox',
    
    
            styleHtmlContent: true,
            scrollable: true,
            
            items: [
                {
                    xtype: 'fieldset',
                    title: 'About You',
                    instructions: '------------------ Stoped -------------------',
                    items: [
                        {
                            xtype: 'button',
                            text: 'Start',
                            name : 'firstName',
                            handler: function (){........}
                        },
                        {
                            xtype: 'button',
                            text: 'Stop',
                            name : 'lastName',
                            handler: function (){........}
                        }
                    ]
                }
            ]
        },
    });
    And I'm looping an array to add elements of xtype: 'MemberEmulator' in to the panel.
    Code:
    for (var Index in Members){
        var tmpEL = Ext.create('WeFindEmulator.view.MemberEmulator');
        tmpEL.setFlex(1);
        Ext.getCmp('WeFindEmuMain').add(tmpEL);
        Ext.Viewport.setActiveItem(tmpEL);
    }
    Who can I add element to a panel so they will show one below the other using their flex ?

    Thanks

    Erez

  2. #2
    Touch Premium Member
    Join Date
    Jun 2011
    Posts
    1,099
    Answers
    113
    Vote Rating
    100
      0  

    Default

    try calling doLayout() on your main panel after you add an item to it. see if that helps. doLayout() causes the layout to be recalculated.

    http://docs.sencha.com/ext-js/4-0/#!...ethod-doLayout

  3. #3
    Sencha Premium Member
    Join Date
    May 2011
    Posts
    167
    Vote Rating
    11
      0  

    Default

    Quote Originally Posted by ehboym View Post
    Hi,

    I'm trying to add element to a panel. I can see the elements in the items array but they either not displayed at all or only one of them is displayed filling up the entire display.

    My panel is defined as:
    Code:
    Ext.define('WeFindEmulator.view.Main', {
        extend: 'Ext.Panel',
        xtype: 'Main',
        id: 'WeFindEmuMain',
        
        config: {
            fullscreen: true,
    
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            items: [
                {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Emulator Runner'
                }
            ]
        }
    });
    The element I'm trying to add is:
    Code:
    Ext.define('WeFindEmulator.view.MemberEmulator', {
        extend: 'Ext.Panel',
        xtype: 'MemberEmulator',
    
        config: {
            layout: 'vbox',
    
    
            styleHtmlContent: true,
            scrollable: true,
            
            items: [
                {
                    xtype: 'fieldset',
                    title: 'About You',
                    instructions: '------------------ Stoped -------------------',
                    items: [
                        {
                            xtype: 'button',
                            text: 'Start',
                            name : 'firstName',
                            handler: function (){........}
                        },
                        {
                            xtype: 'button',
                            text: 'Stop',
                            name : 'lastName',
                            handler: function (){........}
                        }
                    ]
                }
            ]
        },    <-------You have an extra COMMA
    });
    And I'm looping an array to add elements of xtype: 'MemberEmulator' in to the panel.
    Code:
    for (var Index in Members){
        var tmpEL = Ext.create('WeFindEmulator.view.MemberEmulator');
        tmpEL.setFlex(1);
        Ext.getCmp('WeFindEmuMain').add(tmpEL);
        Ext.Viewport.setActiveItem(tmpEL);
    }
    Who can I add element to a panel so they will show one below the other using their flex ?

    Thanks

    Erez
    You have an extra comma in your panel class... Might have bad effects, but you could just do
    Code:
    Ext.getCmp('WeFindEmuMain').add(Ext.create('WeFindEmulator.view.MemberEmulator'));
    You should really get rid of your ID property in the first panel. Not a good practice, especially if you are adding components dynamically.

    http://localhost/extjs/ext-4.2.0.663...nel-method-add

  4. #4
    Sencha User
    Join Date
    May 2012
    Posts
    65
    Answers
    8
    Vote Rating
    1
      0  

    Default

    Hi,

    Thanks for the replay.

    On which element do I need to run the doLayout() ?

    Eny component I try to run it on return with :
    Code:
    TypeError: 'undefined' is not a function (evaluating 'Runners[Index].doLayout()')
    Erez

Posting Permissions

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