Dynamic Creation of View Works In Development, Not In Test

[jhargett]

I have a function in the controller that looks like this:

	loadView : function(viewName) {


		var view = Ext.create('TOMobile.view.' + viewName);
		
		TOMobile.MainContent.removeAll(true);
		
		TOMobile.MainContent.add([view]);
		var lastid = TOMobile.MainContent.getItems().length - 1;
		TOMobile.MainContent.setActiveItem(lastid);
	}

It simply takes a view name, and creates it and adds it to a card layout. This works fine in my development directory. When I build this in to a test and the code is compiled in to one file, it doesn't work. There are no errors thrown, it simply does not show the view. In stepping through the code, the view is created and added to the card panel, so I know all the code is in the build. Any ideas?

[mitchellsimoens]

Inspect the DOM to see if it, it's parent and it's child items are sized properly.

[jhargett]

Thanks, that was good advice! After quite a bit of manual DOM traversal, I found the difference in the computed DOMs of development and test. In test, this DOM element exist:

<div class="x-container x-layout-box-item x-flexed x-sized" id="ext-main-1" style="-webkit-box-flex: 1;">

but, in the generated test app, it looks like this:

<div class="x-container x-layout-box-item x-stretched" id="ext-main-1">

The most important part being the absence of style="-webkit-box-flex: 1;". If I manually add this in to the test site's DOM, the view appears. I am now focusing on why this CSS doesn't get inserted in the test site.

[jhargett]

After much debugging, I found the answer. I had to move the flex attribute on the main card layout in to the config property. So, it went from this:

Ext.define('TOMobile.view.MainContent', {
	extend : 'Ext.Container',
	xtype : 'main',
	flex : 1,
config : {
		layout : 'card',
		items : []
	}
});

to this:

Ext.define('TOMobile.view.MainContent', {
	extend : 'Ext.Container',
	xtype : 'main',
config : {
		flex : 1,
                layout : 'card',
		items : []
	}
});

I am still not sure why it worked in development and not in the build. Also, I would like to say that I have had lots of problems figuring out if things worked better in the config property or at the top level. It has gone both ways.