PDA

View Full Version : why this viewport not showing after compile or build?



extremed
6 Nov 2012, 6:55 AM
why this viewport not showing after compile or build?

Index.html



<!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



Ext.application({

name: 'Oms',

views: ["Viewport"],

autoCreateViewport: true

});




Viewport.js




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'
}]
});

extremed
6 Nov 2012, 7:20 AM
it works with



Ext.define('Oms.view.Viewport', {
extend : 'Ext.container.Viewport',


but not with


Ext.define('Oms.view.Viewport', {
extend : 'Ext.panel.Panel',

why is that?

dongryphon
6 Nov 2012, 10:08 PM
Can you be more specific about what does not work? :)

extremed
6 Nov 2012, 10:45 PM
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



Ext.application({

name: 'Oms',

views: ["Viewport"],

autoCreateViewport: false,

launch: function() {

Ext.create('Oms.view.Viewport',{
renderTo:Ext.getBody()
});

}

});

dongryphon
6 Nov 2012, 11:41 PM
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.

:)

extremed
6 Nov 2012, 11:50 PM
yeah i guess so, thanks

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