View Full Version : adding a component to viewport fails if the layout hierarchy contains a border layout

19 Dec 2012, 3:49 PM

I have some code that on render of a viewport checks for login and either displays a login or the application. This was the idea.

The problem is that if the component hierarchy to be added has a border layout then the layout fails (console: "Layout run failed").

to reproduce:

viewport initComponent does an ajax call: ajax call adds a component to the viewport. the same code with other layouts works... using 4.1.2.

Can someone explain to me why this is failing? Using other layouts works..

Ext.define('Example.view.Viewport', {
extend: 'Ext.container.Viewport',
renderTo: Ext.getBody(),

requires: [

initComponent: function() {
var me = this;
Ext.applyIf(me, {
border: 0,
frame: false,
listeners: {
"render": function (view) { // can be before/after makes no difference
url: '/test',
action: 'POST',
success: function (response) {
failure: function (response) {

spawnView: function (view) {
xtype: 'panel',
layout: 'border',
items: [
html: 'TEST',
region: 'center'

19 Dec 2012, 7:30 PM
The border layout needs to be sized, put a fit layout on your viewport. Also, the renderTo in your config is redundant, the viewport always goes on the body.

20 Dec 2012, 2:27 AM
Thanks. Explicitly setting the "fit" layout on the viewport fixes the problem. Why this is required I do not fully (or need to) understand, somehow the default layout is not correct on a viewport..

A viewport does not necessarily always render to body. My app.js renders the viewport to a specified div else lets it render to the default (body). This is why the renderTo has been explicitly set.

This example viewport class was generated by sencha command. This generates a viewport class with the "renderTo" set to body.

(btw was using 4.1.3)