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,512
    Vote Rating
    176
    dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of

      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,512
    Vote Rating
    176
    dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of dongryphon has much to be proud of

      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