View Full Version : Viewport as a Panel question.

30 Apr 2013, 7:07 AM
Using Sencha Cmd 3.1.1, ExtJs 4.2 on Windows 7 Enterprise sp1

I have a small app that works correctly from the unbuilt files. However, when it is built I get a blank screen and no errors in the console.

I've tracked this down to using a Panel as the "Viewport" for the app. I can't use a true Ext.container.Viewport because the app has to be injected into the div of an existing non-extjs page.

Anyway, is this known behaviour for the build, in that a Panel can't be used? If I create a div inside the body and render to that then it does appear to work.

Anyway, here is some test code derived from the standard generated app. I'd be interested in any comments.


Ext.define('MyApp.view.Viewport', {
// extend: 'Ext.container.Viewport',
extend: 'Ext.panel.Panel',

title: 'Hello',
width: 200,
html: '<p>World!</p>',
renderTo: Ext.getBody()

// requires:[
// 'Ext.tab.Panel',
// 'Ext.layout.container.Border'
// ],

// layout: {
// type: 'border'
// },

// items: [{
// region: 'west',
// xtype: 'panel',
// title: 'west',
// width: 150
// },{
// region: 'center',
// xtype: 'tabpanel',
// items:[{
// title: 'Center Tab 1'
// }]
// }]

2 May 2013, 10:51 AM
I take it you're using autoCreateViewport. Out of curiosity, if you don't use autoCreateViewport and instead just instantiate your "MyApp.view.Viewport" from your application's launch method does that work for you?

2 May 2013, 4:51 PM
Maybe a timing issue? I'm suspicious of that renderTo, I wonder whether Ext.getBody() is being called before the body exists. In general I'd avoid using renderTo in an Ext.define.

As @slemmon suggests, you'd be on safer ground creating the 'viewport' manually in this case.

7 May 2013, 12:05 AM
In my full code I've tried using the launch method but that didn't work with the built version of the app, although it still worked with the unbuil version. (It is only the built version, production and testing versions, that don't work. The unbuilt app works.)

In the case of "renderTo" I'm not sure it is a timing issue. If I create a single div within the body and render to that instead of the body element then the built app starts to work. This is in fact what I want to do with this code, so I'm not worried if rendering to the body doesn't work. It just seems odd that the built app doesn't work when rendering to the body element.

7 May 2013, 3:22 AM
But how are you resolving the div in the latter case? For example, if you do something like this:

renderTo: 'mydiv',

then the string 'mydiv' is stored on the prototype and only resolved to the element at creation time. This is quite different to what you're doing with the body, which needs the element to exist when you're defining the class.

You may be right, your problems may have nothing to do with this, but from the information you've provided it really isn't clear.

Try adding this line at the top of your class definition:


Ext.define('MyApp.view.Viewport', {

It'd be good to confirm that the logging is the same for both the built and unbuilt versions.

As for the launch method, the key thing to change was to move the renderTo into the launch, as part of the create rather than the define. That way, Ext.getBody should be able to resolve correctly.

9 May 2013, 5:39 AM
Having read your answers through a few more times I think you are right about the timing issue.

The renderTo using Ext.getBody() will depend on timing. Presumably it failed in the built versions becuase it got to the Ext.getBody() part quicker and it didn't exist.

I changed this by adding an id to the body and then replacing Ext.getBody() using:

renderTo: 'bodyId'

This now works correctly in the built version.

The version using the launch function should have worked both ways, so I probably didn't test that correctly.