PDA

View Full Version : Adding views to viewPort at runtime



mgamsjager
21 May 2014, 2:11 AM
Hi,

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.

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):
main.add(master)

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:
main.items.getAt(0).destroy()

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

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?

evant
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.require('*');

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) {
ct.add({
title: 'Panel' + (++count)
});
} else {
ct.items.getAt(0).destroy();
}
add = !add;
}, 700);
});