PDA

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



extremed
6 Nov 2012, 5:44 AM
Hi

I have a viewport like this and it works fine normally and after build or compile with sencha cmd it just showing blank screen

any idea why ?



Ext.define('Oms.view.Viewport', {
extend : 'Ext.panel.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'
}]
});



index file



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

James Goddard
6 Nov 2012, 5:53 AM
You probably need a requires for your tab panel so cmd knows to include it.

extremed
6 Nov 2012, 6:07 AM
added after the line "extend : 'Ext.panel.Panel'"


requires: [
'Ext.tab.Panel'
],

still nothing

James Goddard
6 Nov 2012, 6:14 AM
Are you getting any console errors or warnings?

extremed
6 Nov 2012, 6:22 AM
no warnings or errors :(

James Goddard
6 Nov 2012, 6:28 AM
Beats me then. I don't really use cmd because it is a beta product and allows for very little customization. I.E. if you don't do everything just the way it likes it breaks. I would suggest generating a new app and testing the build. If that works I would add your code a piece at a time and figure out what is breaking it.

Also I would suggest asking in the Sencha Cmd forum.

extremed
6 Nov 2012, 6:37 AM
im thinking it might be a problem in viewport though. because i check the app with only viewport and app.js

still nothing shows after build or compile

this is after i removed everything

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',

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:17 AM
found that it works with viewport


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

but not with


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

:(

James Goddard
6 Nov 2012, 9:59 AM
Have you tried turning off 'autoCreateViewport' and creating it manually in launch?

extremed
6 Nov 2012, 10:05 AM
yup tried



Ext.application({

name: 'Oms',

autoCreateViewport: false,

launch: function() {
Ext.create('Oms.view.Viewport');
}

});


only way it works if use "Ext.container.Viewport" if i extend "Ext.panel.Panel" it doesnt show anything

extremed
6 Nov 2012, 10:51 AM
i removed "renderTo : Ext.getBody()" from viewport and added that to applaunch



Ext.application({

name: 'Oms',

views: ["Viewport"],

autoCreateViewport: false,

launch: function() {

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

}

});

and this works.