1. #1
    Sencha User
    Join Date
    Jul 2011
    Posts
    163
    Vote Rating
    1
    extremed is on a distinguished road

      0  

    Default why this viewport not showing after compile or build?

    why this viewport not showing after compile or build?


    why this viewport not showing after compile or build?

    Index.html

    Code:
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>Oms</title>
        <link rel="stylesheet" href="resources/css/gray/app.css">
        <!-- <x-compile> -->
            <!-- <x-bootstrap> -->
                <script src="ext/ext-debug.js"></script>
                <script src="bootstrap.js"></script>
            <!-- </x-bootstrap> -->
            <script src="app/app.js"></script>
        <!-- </x-compile> -->
    </head>
    <body></body>
    </html>
    app.js
    Code:
    Ext.application({    
    
        name: 'Oms',
    
        views: ["Viewport"],
    
        autoCreateViewport: true
        
    });
    Viewport.js

    Code:
    Ext.define('Oms.view.Viewport', {
        extend    : 'Ext.panel.Panel',
        
        requires: [
            'Ext.tab.Panel'
        ],
            
        layout        : 'border',
        width        : '100%',
        height        : 1100,
        renderTo    : Ext.getBody(),
        border        : false,
        id            : 'viewport',
        items: [{
                    region    : 'north',
                    margin    : '0 0 22 0',
                    border    : false,
                    id        : 'page-header-panel'        
               },{
                       region    : 'west',
                    border    : false,
                    width    : '12%'
               },{
                    xtype    : 'tabpanel',
                       region    : 'center',
                    itemId    : 'main_tabpanel'               
               },{
                     region    : 'east', 
                    border    : false,
                    width    : '12%'         
               },{
                    region    : 'south',
                    margin    : '32 0 0 0'                   
               }]
    });

  2. #2
    Sencha User
    Join Date
    Jul 2011
    Posts
    163
    Vote Rating
    1
    extremed is on a distinguished road

      0  

    Default


    it works with

    Code:
    Ext.define('Oms.view.Viewport', {
        extend    : 'Ext.container.Viewport',
    but not with

    Code:
    Ext.define('Oms.view.Viewport', {
        extend    : 'Ext.panel.Panel',
    why is that?

  3. #3
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,403
    Vote Rating
    147
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


    Can you be more specific about what does not work?
    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  4. #4
    Sencha User
    Join Date
    Jul 2011
    Posts
    163
    Vote Rating
    1
    extremed is on a distinguished road

      0  

    Default


    once build everything is blank nothing shows but i found a solution

    some how "renderTo : Ext.getBody()" in side viewport doesn't work, so i remove the line from viewport.js and added it to app.js like below and now it shows the viewport

    still not clear why build product not showing viewport if i use "renderTo : Ext.getBody()" inside viewport.js file

    Code:
    Ext.application({    
    
        name: 'Oms',
    
        views: ["Viewport"],
    
        autoCreateViewport: false,
        
        launch: function() {
            
         Ext.create('Oms.view.Viewport',{
             renderTo:Ext.getBody()
         });
            
        }
        
    });

  5. #5
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Location
    Kansas
    Posts
    1,403
    Vote Rating
    147
    dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold dongryphon is a splendid one to behold

      0  

    Default


    OK, I think I see what is going wrong. You are calling Ext.getBody() before document ready, so there is no body element at that time.

    Don Griffin
    Engineering Manager - Frameworks (Ext JS / Sencha Touch)

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  6. #6
    Sencha User
    Join Date
    Jul 2011
    Posts
    163
    Vote Rating
    1
    extremed is on a distinguished road

      0  

    Default


    yeah i guess so, thanks

    without build or compile "renderTo:Ext.getBody()" inside viewport.js works

Thread Participants: 1