replace the center panel in a border viewport

[mice-pace]

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

    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:

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!');
    }

});

[dongryphon]

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

    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:

    me.on({
        afterlayout: me.onContainerAfterLayout,
        afterrender: me.onContainerAfterRender,
        scope: me
    }); 

However - these two events have analog "template methods" that you should use instead.

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 () {
        // 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.

[ilmcon]

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

[dongryphon]

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.

[mice-pace]

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)

[dongryphon]

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?

[mice-pace]

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