1. #1
    Sencha User
    Join Date
    May 2012
    Posts
    65
    Answers
    8
    Vote Rating
    0
    ehboym is on a distinguished road

      0  

    Default Unanswered: Who to dynamically add elements into a panel

    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
    96
    Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light Farish is a glorious beacon of light

      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
    79
    Vote Rating
    2
    pscanlon1 is on a distinguished road

      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
    0
    ehboym is on a distinguished road

      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

Thread Participants: 2