Question about the portal sample

[bogc]

The sample can be accessed here:

http://docs.sencha.com/ext-js/4-1/#!...al/portal.html

The source code for the example can be accessed here (the code is distributed in the extjs zip file):

http://code.google.com/p/extjs-publi...mples%2Fportal

I modified the portal.js file to add an iframe to a portlet (see the item with the title "Some Page"). Here is the new code:

/**
 * @class Ext.app.Portal
 * @extends Object
 * A sample portal layout application class.
 */
// TODO: Fill in the content panel -- no AccordionLayout at the moment
// TODO: Fix container drag/scroll support (waiting on Ext.lib.Anim)
// TODO: Fix Ext.Tool scope being set to the panel header
// TODO: Drag/drop does not cause a refresh of scroll overflow when needed
// TODO: Grid portlet throws errors on destroy (grid bug)
// TODO: Z-index issues during drag

var columnId = 4;

Ext.define('Ext.app.Portal', {

    extend: 'Ext.container.Viewport',
    //requires: [ 'Ext.diag.layout.ContextItem', 'Ext.diag.layout.Context' ],
    uses: ['Ext.app.PortalPanel', 'Ext.app.PortalColumn', 'Ext.app.GridPortlet', 'Ext.app.ChartPortlet'],

    getTools: function(){
        return [{
            xtype: 'tool',
            type: 'gear',
            handler: function(e, target, panelHeader, tool){
                var portlet = panelHeader.ownerCt;
                portlet.setLoading('Loading...');
                Ext.defer(function() {
                    portlet.setLoading(false);
                }, 2000);
            }
        }];
    },

    initComponent: function(){
        var content = '<div class="portlet-content">'+Ext.example.shortBogusMarkup+'</div>';

        Ext.apply(this, {
            id: 'app-viewport',
            layout: {
                type: 'border',
                padding: '0 5 5 5' // pad the layout from the window edges
            },
            items: [{
                id: 'app-header',
                xtype: 'box',
                region: 'north',
                height: 40,
                html: 'Ext Portal'
            },{
                xtype: 'container',
                region: 'center',
                layout: 'border',
                items: [{
                    id: 'app-options',
                    title: 'Options',
                    region: 'west',
                    animCollapse: true,
                    width: 200,
                    minWidth: 150,
                    maxWidth: 400,
                    split: true,
                    collapsible: true,
                    layout:{
                        type: 'accordion',
                        animate: true
                    },
                    items: [{
                        html: content,
                        title:'Navigation',
                        autoScroll: true,
                        border: false,
                        iconCls: 'nav'
                    },{
                        title:'Settings',
                        html: content,
                        border: false,
                        autoScroll: true,
                        iconCls: 'settings'
                    }]
                },{
                    id: 'app-portal',
                    xtype: 'portalpanel',
                    region: 'center',
                    dockedItems: [
                     {
                        xtype: 'toolbar',
                        dock: 'top',
                        items: [
                          {
                            xtype: 'button',
                            id: 'addGridButton',
                            text: 'Add Grid',
                            listeners: {
                              'click': function(button, e)
                              {
                                var col = Ext.getCmp('col-1');
                                //alert('add something to ' + col.id);
                                col.add(
                                  {
                                      title: 'Grid Portlet',
                                      tools: Ext.getCmp('app-viewport').getTools(),
                                       html: '<div class="portlet-content"> Some bogus : '+Ext.example.bogusMarkup+'</div>',
                                      listeners: {
                                          'close': Ext.bind(this.onPortletClose, this)
                                      }
                                  }                                  
                                );
                                Ext.getCmp('app-portal').doLayout();
                              }
                            }
                            
                          },
                          {
                            xtype: 'button',
                            id: 'addColumnButton',
                            text: 'Add Column',
                            listeners: {
                              'click': function(button, e)
                              {
                                Ext.getCmp('app-portal').add({
                                  id: 'col-' + columnId++
                                });
                                Ext.getCmp('app-portal').doLayout();
                              }
                            }
                            
                          },
                          {
                            xtype: 'button',
                            id: 'removeColumn',
                            text: 'Remove Last Column',
                            listeners: 
                            {
                              'click': function(button, e)
                              {
                                var portal = Ext.getCmp('app-portal');
                                var col = portal.items.getAt(portal.items.getCount() - 1);                                
                                portal.remove(col);
                                portal.doLayout();
                              }
                            }
                            
                          }
                        ]
                      }
                    ],
                    items: [{
                        id: 'col-1',
                        items: [{
                            id: 'portlet-1',
                            title: 'Grid Portlet',
                            tools: this.getTools(),
                            items: Ext.create('Ext.app.GridPortlet'),
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        },{
                            id: 'portlet-2',
                            title: 'Portlet 2',
                            tools: this.getTools(),
                            html: content,
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    },{
                        id: 'col-2',
                        items: [{
                            id: 'portlet-3',
                            title: 'Portlet 3',
                            tools: this.getTools(),
                            html: '<div class="portlet-content">'+Ext.example.bogusMarkup+'</div>',
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }]
                    },{
                        id: 'col-3',
                        items: [{
                            id: 'portlet-4',
                            title: 'Stock Portlet',
                            tools: this.getTools(),
                            items: Ext.create('Ext.app.ChartPortlet'),
                            listeners: {
                                'close': Ext.bind(this.onPortletClose, this)
                            }
                        }, {
                              xtype: 'portlet',       
                              height: 300,
                              title: "Some Page",
                              border: true,
                              closable: true,
                              collapsible: true,
                              layout: 'fit',                                                          
                              items: 
                              [
                                {
                                  xtype: 'component',
                                  autoEl: 
                                  {
                                    tag: 'iframe',
                                    src: 'new_page.html',
                                    frameborder: '0'
                                  },
                                  listeners: {
                                    load: {
                                      element: 'el',
                                      fn: function () {
                                        this.parent().unmask();
                                      }
                                    },
                                    render: function () {
                                      this.up('panel').body.mask('Loading...');
                                    }
                                  } 
                                }
                              ]
                            
                            }
]
                    }]
                }]
            }]
        });
        this.callParent(arguments);
    },

    onPortletClose: function(portlet) {
        this.showMsg('"' + portlet.title + '" was removed');
    },

    showMsg: function(msg) {
        var el = Ext.get('app-msg'),
            msgId = Ext.id();

        this.msgId = msgId;
        el.update(msg).show();

        Ext.defer(this.clearMsg, 3000, this, [msgId]);
    },

    clearMsg: function(msgId) {
        if (msgId === this.msgId) {
            Ext.get('app-msg').hide();
        }
    }
});

Save this page in the same directory with the portal.js file:

new_page.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
</head>

<script type="text/javascript">
  alert('Loading...');
</script>
<body>
</body>
</html>

When I move around the portlet containing the iframe, the iframe gets refreshed. You'll notice that the alert message is displayed every time you move the window. Why is this happening and how can it be prevented?

Thank you

[mitchellsimoens]

The component is getting moved to a new parent which unrenders it and then renders it in the proper place.