View Full Version : Adding views to viewPort at runtime

21 May 2014, 2:11 AM

so I got a Container (with autoCreateViewports in app.js) which is my viewPort.
I would like to add views at runtime to this viewport.


Ext.define('abc.view.Main', {
extend: 'Ext.container.Container',

xtype: 'app-main',
itemId: 'main',
frame: false,
border: false,
autoRender: true,
autoShow: true,
layout: 'fit',
flex: 1,
viewModel: {
type: 'main'


I am playing in the Chrome console:

First I get a ref to the mainView:
main = Ext.ComponentQuery.query('app-main')[0]

Get a ref to the first view (Panel) I would like to add:
var master = new abc.view.mobileMaster();

Put the master into the main (works great):

Lets remove the view because I would like to add another (adding 2 views and use hide/show works as well but that's not the point here)

Lets get the 1 child and destory it:

Lets add another view:
var detail = new abc.view.mobileDetail();

Chrome response with : constructor{initialConfig: Object, id: "mobile-detail-1024", autoGenId: true, protoEl: constructor, initConfig: functionů}\

and the view is added to main.items but it doesn't show on the screen. (adding a new master results in the same thing)

So what am I missing here or is it a bug?

21 May 2014, 3:48 AM
You can add/remove items infinitely, so that's not the problem. You'll need to post a test case.


Ext.onReady(function() {

var add = true,
count = 0;

var ct = new Ext.container.Container({
renderTo: document.body,
width: 100,
height: 100,
layout: 'fit'

setInterval(function() {
if (add) {
title: 'Panel' + (++count)
} else {
add = !add;
}, 700);