1. #1
    Sencha User
    Join Date
    Apr 2012
    Posts
    81
    Vote Rating
    0
    mice-pace is on a distinguished road

      0  

    Default replace the center panel in a border viewport

    replace the center panel in a border viewport


    After quite a bit of looking i managed to put together something quite close to what i want to do, when running this method it creates a new panel, and uses that to replace the one in the middle of the page

    I added a basic test method to each of the components i'm retrieving/creating so that i could run that to see that i was looking at the right objects. That seems to work fine, I'm getting feedback from each of them, the problem, i think, is when I 'doLayout' on the panel, the panel is rendered but perhaps the two things inside of it are not... the panel is broken up into the two sections where each would go i think, but both sections appear blank. Also the afterLayout and afterRender events are not getting triggered.

    I'm probably missing something simple. Does anyone know what I'm doing wrong?

    Here's the code for the method I'm calling
    Code:
        openJob: function(jobno) {
            jobPanel = Ext.create('MyApp.view.jobcontainer');
            jobPanel.test();
            //Build the new panel object we will be using
    
    
            viewport = Ext.getCmp('mainwindow');
            viewport.test();
            centerRegion = viewport.getComponent(1);
            centerRegion.test();
            //Locate the region we wish to replace
    
            centerRegion.removeAll();
    
            /*jobPanel.add(Ext.create('MyApp.view.MyForm'));
            jobPanel.add(Ext.create('MyApp.view.MyTabPanel'));
            jobPanel.eachChild(function(child) { child.doLayout(); });*/
            jobPanel.doLayout();
    
            centerRegion.add(jobPanel);
            centerRegion.doLayout();
            //Replace the panel and refresh that region
    
            alert("Done");
            //Load the job details
        }
    And here's the code for the panel i'm trying to add:
    Code:
    Ext.define('MyApp.view.jobcontainer', {
        extend: 'Ext.container.Container',
        alias: 'widget.newjob',
    
        requires: [
            'MyApp.view.MyForm',
            'MyApp.view.MyTabPanel'
        ],
    
        height: 250,
        width: 400,
        layout: {
            type: 'border'
        },
    
        initComponent: function() {
            var me = this;
    
            Ext.applyIf(me, {
                items: [
                    {
                        xtype: 'myform',
                        region: 'north',
                        title: 'Job'
                    },
                    {
                        xtype: 'mytabpanel',
                        region: 'center'
                    }
                ],
                listeners: {
                    afterlayout: {
                        fn: me.onContainerAfterLayout,
                        scope: me
                    },
                    afterrender: {
                        fn: me.onContainerAfterRender,
                        scope: me
                    }
                }
            });
    
            me.callParent(arguments);
        },
    
        onContainerAfterLayout: function(abstractcontainer, layout, options) {
            alert("I am HERE!");
        },
    
        onContainerAfterRender: function(abstractcomponent, options) {
            alert("I am HERE!");
        },
    
        test: function() {
            alert('Jobcontainer, reporting!');
        }
    
    });

  2. #2
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,341
    Vote Rating
    132
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    For starters, calling "doLayout" is not something you should do in V4 (that was how V3 handled it). This sequence should work:

    PHP Code:
        Ext.suspendLayouts();
        
    centerRegion.removeAll();
        
    centerRegion.add(jobPanel);
        
    Ext.resumeLayouts(true); 
    You cannot assign a "listeners" config to yourself in initComponent. This would be the proper way to add listeners on your own component:

    PHP Code:
        me.on({
            
    afterlayoutme.onContainerAfterLayout,
            
    afterrenderme.onContainerAfterRender,
            
    scopeme
        
    }); 
    However - these two events have analog "template methods" that you should use instead.

    PHP Code:
    Ext.define('MyApp.view.jobcontainer', {
        
    extend'Ext.container.Container',
        
    alias'widget.newjob',

        
    requires: [
            
    'MyApp.view.MyForm',
            
    'MyApp.view.MyTabPanel'
        
    ],

        
    height250,
        
    width400,
        
    layout: {
            
    type'border'
        
    },

        
    initComponent: function () {
            
    // what it was but minus "listeners"
        
    },

        
    afterRender: function () {
            
    this.callParent();
        },
        
    afterLayout: function () {
            
    this.callParent(arguments); // there are args
        
    }
    }); 
    Lastly, console.log may be better than alert for most testing purposes as it won't effect the UI and create issues of its own.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  3. #3
    Touch Premium Member
    Join Date
    Sep 2011
    Posts
    9
    Vote Rating
    0
    ilmcon is on a distinguished road

      0  

    Default


    Hi,

    I have the same problem. I want to add a window to the viewport center region.
    In Ext Js 4.0.7 everything works fine.
    For Ext Js 4.1.1 update I have changed the lines to:

    ...
    var viewport = Ext.getCmp('container');
    var center = viewoport.getComponent('center');
    Ext.suspendLayouts();
    center.removeAll();
    center.add(window);
    Ext.resumeLayouts(true);
    window.show();
    ...

    The window appears on the right postion and is a part of the viewport. But the region center is still empty. Can somebody help me?

    THX

  4. #4
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,341
    Vote Rating
    132
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    Quote Originally Posted by ilmcon View Post
    Hi,

    I have the same problem. I want to add a window to the viewport center region.
    In Ext Js 4.0.7 everything works fine.
    For Ext Js 4.1.1 update I have changed the lines to:

    ...
    var viewport = Ext.getCmp('container');
    var center = viewoport.getComponent('center');
    Ext.suspendLayouts();
    center.removeAll();
    center.add(window);
    Ext.resumeLayouts(true);
    window.show();
    ...

    The window appears on the right postion and is a part of the viewport. But the region center is still empty. Can somebody help me?

    THX
    I think your problem is different because a Window is a "floating" component and is not really part of the container in the normal way. The removeAll method will only remove non-floating components for example.

    My guess is that you don't really want a Window but perhaps a Panel.

    Please start a new thread and post a complete code example so we can help.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  5. #5
    Sencha User
    Join Date
    Apr 2012
    Posts
    81
    Vote Rating
    0
    mice-pace is on a distinguished road

      0  

    Default


    The regions of a BorderLayout are fixed at render time and thereafter, its child Components may not be removed or added**. To add/remove Components within a BorderLayout, have them wrapped by an additional Container which is directly managed by the BorderLayout. If the region is to be collapsible, the Container used directly by the BorderLayout manager should be a Panel. In the following example a Container (an Ext.panel.Panel) is added to the west region:
    I think this may have been where i was going wrong. I was trying to directly replace a component and that wasn't allowed... so instead of making the panel i wanted to replace a direct member of the border layout, i put a container in the center region, and then replace the content of THAT instead of touching the content of the layout directly.

    The AfterLayout method not triggering was what gave it away eventually... Turns out the divided section is empty and divided because i removedAll first, but then couldn't add (the section i was replacing happened to be divided the same way)

  6. #6
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,341
    Vote Rating
    132
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    Quote Originally Posted by mice-pace View Post
    I think this may have been where i was going wrong. I was trying to directly replace a component and that wasn't allowed... so instead of making the panel i wanted to replace a direct member of the border layout, i put a container in the center region, and then replace the content of THAT instead of touching the content of the layout directly.

    The AfterLayout method not triggering was what gave it away eventually... Turns out the divided section is empty and divided because i removedAll first, but then couldn't add (the section i was replacing happened to be divided the same way)
    This restriction was removed in Ext JS 4.1, so border layout can manage adding and removing regions. What version are you using?
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  7. #7
    Sencha User
    Join Date
    Apr 2012
    Posts
    81
    Vote Rating
    0
    mice-pace is on a distinguished road

      0  

    Default


    *checks* No i think I'm fairly... Huh. Ext JS 4.0

  8. #8
    Sencha User
    Join Date
    Feb 2008
    Posts
    99
    Vote Rating
    0
    sekaijin is on a distinguished road

      0  

    Default


    I looked for a solution to this problem.
    the easiest way is to go through a Contener
    Code:
      Ext.applyIf(me, {
        items: [
          {
            xtype: 'myform',
            region: 'north',
            title: 'Job'
          },
          {
            region: 'center',
            xtype: 'container',
            layout: 'fit',
            items:[
              {
              xtype: 'mytabpanel',
          }
        ],
    ....
    you can then delete the contents of the container and add into it, another panel
    Code:
    openJob: function(jobno) {
      ...
      centerRegion = viewport.getComponent(1);
      ...
      centerRegion.removeAll();
      ...
      centerRegion.add(jobPanel);
    }
    Bye
    JYT

  9. #9
    Sencha User
    Join Date
    Nov 2013
    Posts
    1
    Vote Rating
    0
    Anna935 is on a distinguished road

      0  

    Default


    Thanks for sharing.