PDA

View Full Version : Dynamic Creation of View Works In Development, Not In Test



jhargett
29 Dec 2012, 7:01 PM
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
31 Dec 2012, 6:58 AM
Inspect the DOM to see if it, it's parent and it's child items are sized properly.

jhargett
31 Dec 2012, 7:39 PM
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
6 Jan 2013, 11:52 AM
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.