1. #1
    Sencha Premium Member
    Join Date
    Jan 2010
    Location
    Vancouver, Canada
    Posts
    133
    Vote Rating
    10
    bogc will become famous soon enough

      0  

    Default Question about the portal sample

    Question about the portal sample


    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:

    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

    Code:
    <!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

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,632
    Vote Rating
    817
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The component is getting moved to a new parent which unrenders it and then renders it in the proper place.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

Thread Participants: 1

Tags for this Thread