View Full Version : VBox inline styles setting width height to zero

23 Sep 2013, 10:34 PM
I have a container that extends Container as such:

Ext.define('documentexplorer.view.DocumentSummaryWidget', {
extend: 'Ext.container.Container',
emptyText: "No document found.",
layout: {
type: 'vbox',
align: 'stretch'

tpl:'<tpl for="1">'+
'<div id="main">'+
'<h1 id="q">Title</h1>{title}</br>'+ // Uses title extracted from text, or filename if no title found
'<h1 id="q">Summary</h1> {summary}</br>'+



This object when created (Inside of a Panel) renders two divs of the following classes (x-box-inner, x-box-target) with inline styles: width and height set to 0 and doesn't show the extended container.
Rendered code looks like this:

<div id="panel-1002-body" class="x-panel-body x-panel-body-default x-panel-body-default x-docked-noborder-right x-docked-noborder-bottom x-docked-noborder-left" style="overflow: auto; width: 1326px; height: 95px; left: 0px; top: 25px;"> <span id="panel-1002-outerCt" style="display: table; width: 100%; height: 100%;">
<div id="panel-1002-innerCt" class="" style="display:table-cell;height:100%;vertical-align:top;">
<div id="ext-comp-1004" class="x-container x-container-default x-box-layout-ct">
<div id="ext-comp-1004-innerCt" class="x-box-inner " role="presentation" style="height: 0px; width: 0px;">
<div id="ext-comp-1004-targetEl" class="x-box-target" style="width: 0px;">
<div class="summaryTitle">
Here is the document title.
<div class="summaryText">
Here is the document summary.

So where in ExtJS are these values being set, and what can I do to make sure that the component is being rendered correctly? I've looked in both the Box.js and VBox.js code, but can't find anywhere that it is injecting this inline styling (correctly?).

In a debugger, if I change the x-box-inner width to 100% and height to 100px, and set the x-box-target width to 100% then it appears correctly. Just not sure where the 0 values are coming from nor how to correct them.

Any help is appreciated.

24 Sep 2013, 11:30 AM
You must decide what are you going to show. If some html - then use plain component. If other components - then use container with appropriate layout. You can't mix these unless you define own layout class.

24 Sep 2013, 12:42 PM
I inherited this code so I wasn't sure of the original intent. My coworker changed the vbox to "auto" and all is displaying normally now.

Thanks for taking the time to respond, what you said makes sense.