Geek asks and answers

ExtJS: dynamically add an item to the viewport

Let's say I have JS in a single file that creates Viewport:

Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [
        {
            region: 'center'
        }, 
        ...
    ]
});

Now let's say that I have another JS file that is subsequently loaded with this component definition:

{
    contentEl: 'content',
    height: '100%'
}

How to add this component to contentEl: 'content'the area 'center'?

+3
source share
3 answers
var viewpoert = Ext.create('Ext.container.Viewport', {
    layout: 'border'
});

anoter file;

var contentEl = Ext.Create('Ext.Something.What.You.Want', {
     region: "center"
});

finally:

viewport.add(contentEl);
+3
source 
var viewPort = Ext.create('Ext.container.Viewport', {
    layout: 'border',
    items: [
        {
            region: 'center',
            id:'centerViewPortId'
        }
        ]
});

//your second javascript file
Ext.onReady(function(){
    var contentEl = Ext.create('Ext.Component', {
        contentEl: 'content',
        renderTo: Ext.getBody()
    });
viewPort.getComponent('centerViewPortId').add(contentEl);
});
+4
source

This link was still at the top of the search results for Google, so I decided to add another neat solution:

var viewPort = Ext.create('Ext.container.Viewport', {
    layout: 'border'
});

//your second javascript file
Ext.onReady(function(){
    var contentEl = Ext.create('Ext.Component', {
        contentEl: 'content',
        region: 'center',
        renderTo: Ext.getBody()
    });
viewPort.add(contentEl);
});
+1
source

More articles:


All Articles