1. #1
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    84
    Answers
    4
    Vote Rating
    1
    busaware1 is on a distinguished road

      0  

    Default Unanswered: Adding components dynamically - are in DOM but not displaying on screen

    Unanswered: Adding components dynamically - are in DOM but not displaying on screen


    Hi,

    I am using Ext.Create to create a number of components which I am adding dynamically to the screen from a button click.
    One button (when tapped) adds a form component (after filling it with values) and another adds a carousel of images (also added dynamically on a different button tap) - before each add I remove the contents of what I am adding to.

    I get no errors - components are in the DOM and take up space on the screen e.g. I can (via chrome) inspect the elements and they are all present with data and laid out nicely.
    But nothing shows on the screen!

    Is there a repaint event or something I need to fire after adding these components dynamically?
    Or is there some sequence of events I am missing here...to make it display on screen.
    Any help greatly appreciated...

    Code is below.....
    e.g.
    Code:
    // ST 2.1 controller code
    refs: {
                componentIWantToAddTo: 'MyContainer #panelWithinContainer'
            },
    
    // on button tap code
    // create my component - in this case a form
     var cmp = Ext.create('MyApp.view.MyForm', {});
    
    
     // set the data values - have these already from a store....
      cmp.setRecord(record);
    
    
    
    // Remove any existing items from this...
     this.getComponentIWantToAddTo().removeAll(true, false);
    
    // add my component (filled in form - whatever).
    this.getComponentIWantToAddTo().add(cmp);

  2. #2
    Sencha User
    Join Date
    Oct 2011
    Location
    Groningen, Netherlands
    Posts
    55
    Answers
    1
    Vote Rating
    0
    hermanvandermaas is an unknown quantity at this point

      0  

    Default


    I had the same problem, and avoided the remove / add way altogether. I only added items to a container (after checking the item was not already added), and used the setActiveItem(instancename) method of the parent container to get the proper item to show.

  3. #3
    Sencha Premium Member
    Join Date
    Feb 2012
    Posts
    84
    Answers
    4
    Vote Rating
    1
    busaware1 is on a distinguished road

      0  

    Default


    thx - couldnt get this to work either - same problem.
    I ended up embedding the sub xtypes into my parent view and using setHidden(true) or false and that seems to work.
    thx again

  4. #4
    Sencha User
    Join Date
    Jan 2012
    Location
    London, UK
    Posts
    502
    Answers
    25
    Vote Rating
    55
    shepsii is a jewel in the rough shepsii is a jewel in the rough shepsii is a jewel in the rough

      0  

    Default


    Where you can see the elements in the DOM but not on the screen, 99% of the time this is because they are scrollable (or have defaulted to being scrollable) yet they are not inside a "fit" layout or do not have a height or min height set in any other way. Therefore, they get given a height of 0, hence their invisibility in the browser. Sencha Touch thinks its fine for scrollable items to be of any height because the user could just scroll through - not the case of course if the height of the component in the DOM is 0!
    I blog about Sencha Touch at www.senchatouchdev.com

Thread Participants: 2