Results 1 to 4 of 4

Thread: Dynamic Creation of View Works In Development, Not In Test

  1. #1
    Sencha User
    Join Date
    Sep 2007
    Posts
    18
    Vote Rating
    0
      0  

    Default Dynamic Creation of View Works In Development, Not In Test

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

    Code:
    	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?

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,422
    Vote Rating
    1271
      0  

    Default

    Inspect the DOM to see if it, it's parent and it's child items are sized properly.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it!

    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Sep 2007
    Posts
    18
    Vote Rating
    0
      0  

    Default

    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:

    Code:
    <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:

    Code:
    <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.

  4. #4
    Sencha User
    Join Date
    Sep 2007
    Posts
    18
    Vote Rating
    0
      0  

    Default

    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:

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

    Code:
    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.

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •