Calling components by id confusion - bug or incorrect method?

[tyladurdan]

I'm trying to understand the calling of components a bit better, and I wonder if I have stumbled upon a bug or if I am just not implementing something correctly.

I basically have a split view that loads Youtube JSON into the left panel, and when clicking on an item in the list it displays the video in the right.

This all works fine on it's own, or even in a tabpanel. But when I put the tabpanel inside a container that has a header (imagine a tabpanel but with a fixed header 20% height above it) when I click on an item in the list it does not display the youtube video. I'm struggling to understand how adding the tabpanel with header inside a container is causing it to break.

The list and the detail panel have their own ids, and the detail panel is being called like this:

  onListDisclose: function(list, record, target, index, e, options) {

        var src = record.get('id');
        var iframe = '<iframe width="100%" height="50%" src="http://www.youtube.com/embed/'+src+'" frameborder="0" allowfullscreen></iframe>';
        var detailPanel;
        detailPanel = this.getYoutubeDetails();
        detailPanel.setHtml(iframe);

Is it considered best practice to use the 'id' reference to call components? And is this preferred over 'itemid' or is it even recommend to call components by xtype?? Why would doing the above change the calling of the component by id?

[bluehipy]

Probably it is related to layouts and mettrics. I guess the youtube thingy is there but not visible. Did you check the generated html code?

[bluehipy]

I don't think so. Show us the view code.

The "header" is docked top?

[tyladurdan]

I'm pretty certain it's a bug....as just tested on Chrome and it works no problem. See the screengrabs, the safari version shows 0 height and the Chrome version shows a height of 202 pixels.

Can we get this moved to the bugs forum and I can explain it properly?

Thankschrome.jpgsafari.jpg