How to interpret the Layout log?

[tvanzoelen]

I have a piece of code that is generated. It throws an error, but I can not see where it goes wrong easilly



Ext.onReady(function() {


var logo = Ext.create('Ext.Panel', { itemId: 'logo', screen: self
, region: 'west'
, html: ''
, layout: 'card'
, width: 300
});

var header = Ext.create('Ext.Panel', { itemId: 'header', screen: self
, region: 'center'
, html: ''
, layout: 'card'
});

var body = Ext.create('Ext.Panel', { itemId: 'body', screen: self
, region: 'center'
, html: ''
, layout: 'card'
});

var fake1 = Ext.create('Ext.Panel', { itemId: 'fake1', screen: self
, region: 'west'
, width: 223
, layout: 'card'
});

var loginname = Ext.create('Ext.form.field.Text', { itemId: 'loginname'
, screen: self
, fieldLabel: 'Username'
, name: 'loginname'
, value: ''
, labelWidth: 75
, width: 225
, height: 22
, resize: { minHeight: 22, maxHeight: 22, minWidth: 225, maxWidth: 375 }
});

var password = Ext.create('Ext.form.field.Text', { itemId: 'password'
, screen: self
, fieldLabel: 'Password'
, inputType: 'password'
, name: 'password'
, labelWidth: 75
, width: 225
, height: 22
, resize: { minHeight: 22, maxHeight: 22, minWidth: 225, maxWidth: 375 }
});

var client = Ext.create('Ext.form.field.Number', { itemId: 'client'
, screen: self
, fieldLabel: 'Client'
, inputType: ''
, name: 'client'
, value: '24'
, labelWidth: 75
, width: 150
, height: 22
, resize: { minHeight: 22, maxHeight: 22, minWidth: 150, maxWidth: 225 }
});

var application = Ext.create('Ext.form.field.Number', { itemId: 'application'
, screen: self
, fieldLabel: 'Application'
, inputType: ''
, name: 'application'
, value: '20'
, labelWidth: 75
, width: 150
, height: 22
, resize: { minHeight: 22, maxHeight: 22, minWidth: 150, maxWidth: 225 }
});

var rememberme = Ext.create('Ext.form.field.Checkbox', { itemId: 'rememberme'
, screen: self
, fieldLabel: 'Remember Me'
, name: 'rememberme'
, value: '@rememberme'
, labelWidth: 75
, width: 225
, height: 22
, resize: { minHeight: 22, maxHeight: 22, minWidth: 225, maxWidth: 375 }
});

var formfieldset10 = Ext.create('Ext.form.FieldSet', { itemId: 'formfieldset10', screen: self, defaults: { labelWidth: 75 }
, items: [loginname,
password,
client,
application,
rememberme]
});

var form_loginpanel = Ext.create('Ext.form.Panel', { itemId: 'form_loginpanel', items: [formfieldset10] });

var loginpanel = Ext.create('Ext.Panel', {
itemId: 'loginpanel'
, screen: self
, region: 'center'
, layout: 'card', items: [form_loginpanel]
});

var submitbut = Ext.create('Ext.Button', { itemId: 'submitbut'
, screen: self
, text: 'Log in'
});

var formfieldset17 = Ext.create('Ext.form.FieldSet', { itemId: 'formfieldset17'
, screen: self
, defaults: { labelWidth: 75 }
, items: [submitbut]
});

var form_fake2 = Ext.create('Ext.form.Panel', { itemId: 'form_fake2'
, items: [formfieldset17]
});

var fake2 = Ext.create('Ext.Panel', { itemId: 'fake2'
, screen: self
, region: 'east'
, width: 319
, layout: 'card', items: [form_fake2]
});

var footerpanel = Ext.create('Ext.Panel', { itemId: 'footerpanel'
, screen: self
, height: 20
, html: ''
, layout: 'card'
});

var fourthpanel = Ext.create('Ext.Panel', { itemId: 'fourthpanel', screen: self
, region: 'south'
, height: 20
, layout: 'card', items: [footerpanel]
});

var thirdpanel = Ext.create('Ext.Panel', { itemId: 'thirdpanel', screen: self
, region: 'south'
, id: 'thirdpanel'
, layout: 'border', items: [fake1,
loginpanel,
fake2,
fourthpanel]
});

var secondpanel = Ext.create('Ext.Panel', { itemId: 'secondpanel', screen: self
, region: 'south'
, layout: 'border'
, height: 300, items: [body, thirdpanel]
});

var firstpanel = Ext.create('Ext.Panel', { itemId: 'firstpanel'
, screen: self
, layout: 'border'
, id: 'firstpanel'
, items: [logo,
header,
secondpanel]
});

var screen_0 = Ext.create('Ext.Panel', { itemId: 'screen_0', screen: self
, id: 'screen_0'
, layout: 'card'
, items: [firstpanel]
});

var vp = Ext.create('Ext.Viewport', {
layout: 'fit'
, renderTo: Ext.getBody()
,items: [screen_0]
});


});


Output



++viewport-1033<fit> - size: configured/configured
ext-al...rsion=1 (regel 6570)
++screen_0<dock> - size: calculated/calculated
ext-al...rsion=1 (regel 6570)
++screen_0<card> - size: calculated/calculated
ext-al...rsion=1 (regel 6570)
++firstpanel<dock> - size: calculated/calculated
ext-al...rsion=1 (regel 6570)
++firstpanel<container> - size: calculated/calculated
ext-al...rsion=1 (regel 6570)
--panel-1032<container> - size: calculated/configured
ext-al...rsion=1 (regel 6570)
triggeredBy: count=3
ext-al...rsion=1 (regel 6570)
panel-1032-body.height (300) dirty: false, setBy: panel-1032<dock>
ext-al...rsion=1 (regel 6570)
panel-1032-body.width (1383) dirty: false, setBy: panel-1032<dock>
ext-al...rsion=1 (regel 6570)
thirdpanel.height () dirty: false, setBy: ?
ext-al...rsion=1 (regel 6570)
--panel-1016<dock> - size: calculated/calculated
ext-al...rsion=1 (regel 6570)
triggeredBy: count=2
ext-al...rsion=1 (regel 6570)
panel-1016.height () dirty: false, setBy: panel-1032<container>
ext-al...rsion=1 (regel 6570)
panel-1016.width (1381) dirty: false, setBy: panel-1032<container>
ext-al...rsion=1 (regel 6570)
--thirdpanel<dock> - size: calculated/shrinkWrap
ext-al...rsion=1 (regel 6570)
triggeredBy: count=2
ext-al...rsion=1 (regel 6570)
thirdpanel.contentHeight () dirty: false, setBy: ?
ext-al...rsion=1 (regel 6570)
thirdpanel.width (1381) dirty: false, setBy: panel-1032<container>
ext-al...rsion=1 (regel 6570)
--thirdpanel<container> - size: calculated/shrinkWrap
ext-al...rsion=1 (regel 6570)
triggeredBy: count=4
ext-al...rsion=1 (regel 6570)
panel-1017.width (223) dirty: false, setBy: panel-1017<dock>
ext-al...rsion=1 (regel 6570)
panel-1029.width (319) dirty: false, setBy: panel-1029<dock>
ext-al...rsion=1 (regel 6570)
panel-1031.height (20) dirty: false, setBy: panel-1031<dock>
ext-al...rsion=1 (regel 6570)
thirdpanel-body.width (1381) dirty: false, setBy: thirdpanel<dock>
ext-al...rsion=1 (regel 6570)
--panel-1017<dock> - size: configured/calculated
ext-al...rsion=1 (regel 6570)
triggeredBy: count=2
ext-al...rsion=1 (regel 6570)
panel-1017.height () dirty: false, setBy: thirdpanel<container>
ext-al...rsion=1 (regel 6570)
panel-1017.width (223) dirty: false, setBy: panel-1017<dock>
ext-al...rsion=1 (regel 6570)
--panel-1025<dock> - size: calculated/calculated
ext-al...rsion=1 (regel 6570)
triggeredBy: count=2
ext-al...rsion=1 (regel 6570)
panel-1025.height () dirty: false, setBy: thirdpanel<container>
ext-al...rsion=1 (regel 6570)
panel-1025.width (837) dirty: false, setBy: thirdpanel<container>
ext-al...rsion=1 (regel 6570)
--panel-1025<card> - size: calculated/calculated
ext-al...rsion=1 (regel 6570)
triggeredBy: count=2
ext-al...rsion=1 (regel 6570)
panel-1025-body.height () dirty: false, setBy: panel-1025<dock>
ext-al...rsion=1 (regel 6570)
panel-1025-body.width (837) dirty: false, setBy: panel-1025<dock>
ext-al...rsion=1 (regel 6570)
--form-1024<dock> - size: calculated/calculated
ext-al...rsion=1 (regel 6570)
triggeredBy: count=2
ext-al...rsion=1 (regel 6570)
form-1024.height () dirty: false, setBy: ?
ext-al...rsion=1 (regel 6570)
form-1024.width (835) dirty: false, setBy: panel-1025<card>
ext-al...rsion=1 (regel 6570)
--form-1024<anchor> - size: calculated/calculated
ext-al...rsion=1 (regel 6570)
triggeredBy: count=5
ext-al...rsion=1 (regel 6570)
fieldset-1023.height (126) dirty: false, setBy: fieldset-1023<fieldset>
ext-al...rsion=1 (regel 6570)
fieldset-1023.width (833) dirty: false, setBy: form-1024<anchor>
ext-al...rsion=1 (regel 6570)
form-1024-body.height () dirty: false, setBy: form-1024<dock>
ext-al...rsion=1 (regel 6570)
form-1024-body.width (835) dirty: false, setBy: form-1024<dock>
ext-al...rsion=1 (regel 6570)
form-1024.containerChildrenDone:dom (true) dirty: false, setBy: fieldset-1023<fieldset>
ext-al...rsion=1 (regel 6570)
++fieldset-1023<fieldset> - size: calculated/shrinkWrap
ext-al...rsion=1 (regel 6570)
++fieldset-1023<anchor> - size: calculated/shrinkWrap
ext-al...rsion=1 (regel 6570)
++textfield-1018<textfield> - size: configured/configured
ext-al...rsion=1 (regel 6570)
++textfield-1019<textfield> - size: configured/configured
ext-al...rsion=1 (regel 6570)
++numberfield-1020<triggerfield> - size: configured/configured
ext-al...rsion=1 (regel 6570)
++numberfield-1021<triggerfield> - size: configured/configured
ext-al...rsion=1 (regel 6570)
++checkboxfield-1022<field> - size: configured/configured
ext-al...rsion=1 (regel 6570)
--panel-1029<dock> - size: configured/calculated
ext-al...rsion=1 (regel 6570)
triggeredBy: count=2
ext-al...rsion=1 (regel 6570)
panel-1029.height () dirty: false, setBy: thirdpanel<container>
ext-al...rsion=1 (regel 6570)
panel-1029.width (319) dirty: false, setBy: panel-1029<dock>
ext-al...rsion=1 (regel 6570)
--panel-1029<card> - size: configured/calculated
ext-al...rsion=1 (regel 6570)
triggeredBy: count=2
ext-al...rsion=1 (regel 6570)
panel-1029-body.height () dirty: false, setBy: panel-1029<dock>
ext-al...rsion=1 (regel 6570)
panel-1029-body.width (319) dirty: false, setBy: panel-1029<dock>
ext-al...rsion=1 (regel 6570)
--form-1028<dock> - size: calculated/calculated
ext-al...rsion=1 (regel 6570)
triggeredBy: count=2
ext-al...rsion=1 (regel 6570)
form-1028.height () dirty: false, setBy: ?
ext-al...rsion=1 (regel 6570)
form-1028.width (317) dirty: false, setBy: panel-1029<card>
ext-al...rsion=1 (regel 6570)
--form-1028<anchor> - size: calculated/calculated
ext-al...rsion=1 (regel 6570)
triggeredBy: count=5
ext-al...rsion=1 (regel 6570)
fieldset-1027.height (24) dirty: false, setBy: fieldset-1027<fieldset>
ext-al...rsion=1 (regel 6570)
fieldset-1027.width (315) dirty: false, setBy: form-1028<anchor>
ext-al...rsion=1 (regel 6570)
form-1028-body.height () dirty: false, setBy: form-1028<dock>
ext-al...rsion=1 (regel 6570)
form-1028-body.width (317) dirty: false, setBy: form-1028<dock>
ext-al...rsion=1 (regel 6570)
form-1028.containerChildrenDone:dom (true) dirty: false, setBy: fieldset-1027<fieldset>
ext-al...rsion=1 (regel 6570)
++fieldset-1027<fieldset> - size: calculated/shrinkWrap
ext-al...rsion=1 (regel 6570)
++fieldset-1027<anchor> - size: calculated/shrinkWrap
ext-al...rsion=1 (regel 6570)
++button-1026<button> - boxParent: fieldset-1027 - size: natural/shrinkWrap
ext-al...rsion=1 (regel 6570)
++panel-1017<card> - size: configured/calculated
ext-al...rsion=1 (regel 6570)
++panel-1031<dock> - size: calculated/configured
ext-al...rsion=1 (regel 6570)
++panel-1031<card> - size: calculated/configured
ext-al...rsion=1 (regel 6570)
++panel-1030<dock> - size: calculated/configured
ext-al...rsion=1 (regel 6570)
++panel-1030<card> - size: calculated/configured
ext-al...rsion=1 (regel 6570)
++panel-1016<card> - size: calculated/calculated
ext-al...rsion=1 (regel 6570)
++panel-1014<dock> - size: configured/calculated
ext-al...rsion=1 (regel 6570)
++panel-1014<card> - size: configured/calculated
ext-al...rsion=1 (regel 6570)
++panel-1015<dock> - size: calculated/calculated
ext-al...rsion=1 (regel 6570)
++panel-1015<card> - size: calculated/calculated
ext-al...rsion=1 (regel 6570)
++panel-1032<dock> - size: calculated/configured
ext-al...rsion=1 (regel 6570)
Cycles: 24, Flushes: 3, Calculates: 86 in 83 msec
ext-al...rsion=1 (regel 6570)
Calculates by type:
ext-al...rsion=1 (regel 6570)
dock: 14 in 26 tries (1.9x) at 13 msec (avg 0.5 msec)
ext-al...rsion=1 (regel 6570)
container: 3 in 21 tries (7x) at 10 msec (avg 0.476 msec)
ext-al...rsion=1 (regel 6570)
anchor: 4 in 12 tries (3x) at 7 msec (avg 0.583 msec)
ext-al...rsion=1 (regel 6570)
fieldset: 2 in 6 tries (3x) at 1 msec (avg 0.167 msec)
ext-al...rsion=1 (regel 6570)
button: 1 in 2 tries (2x) at 1 msec (avg 0.5 msec)
ext-al...rsion=1 (regel 6570)
fit: 1 in 1 tries (1x) at 1 msec (avg 1 msec)
ext-al...rsion=1 (regel 6570)
card: 9 in 12 tries (1.3x) at 0 msec (avg 0 msec)
ext-al...rsion=1 (regel 6570)
textfield: 2 in 2 tries (1x) at 0 msec (avg 0 msec)
ext-al...rsion=1 (regel 6570)
triggerfield: 2 in 2 tries (1x) at 0 msec (avg 0 msec)
ext-al...rsion=1 (regel 6570)
field: 1 in 1 tries (1x) at 0 msec (avg 0 msec)
ext-al...rsion=1 (regel 6570)
autocomponent: 1 in 1 tries (1x) at 0 msec (avg 0 msec)

[tvanzoelen]

Its getting me this error


[E] ----------------- FAILURE -----------------
log (message="[E] ----------------- FAILURE -----------------")ext-al...rsion=1 (regel 6570)
run()Contex...rsion=1 (regel 318)
flushLayouts()ext-al...rsion=1 (regel 42626)
resumeLayouts(flush=true)ext-al...rsion=1 (regel 42633)
resumeLayouts(flush=true)ext-al...rsion=1 (regel 44551)
render(container=Object { dom=body#ext-gen1021.x-body, id="ext-gen1021", $cache={...}, meer...}, position=undefined)ext-al...rsion=1 (regel 25848)
constructor(config=Object { layout="fit", renderTo={...}, items=[1]})ext-al...rsion=1 (regel 42898)
callParent(args=[Object { layout="fit", renderTo={...}, items=[1]}])ext-al...rsion=1 (regel 3624)
constructor(config=Object { layout="fit", renderTo={...}, items=[1]})ext-al...rsion=1 (regel 54117)
constructor ()ext-al...rsion=1 (regel 3813)
(?)(c=constructor(), a=[Object { layout="fit", renderTo={...}, items=[1]}])Contex...rsion=1 (regel 4857)
instantiate()ext-al...rsion=1 (regel 4831)
alias()ext-al...rsion=1 (regel 1736)
(?)()ext4ap...ion=3.0 (regel 172)
createSingle()ext-al...rsion=1 (regel 8281)
fire()ext-al...rsion=1 (regel 8430)
fireDocReady()

[tvanzoelen]

Ok found, a missing height property on the thirdpanel.....

It would be nice if these messages are more readable. Width en Height set on center panels in the border layout will also crash the thing.

[dongryphon]

The formatting of the layout tree got lost in your paste to the forum I think. The levels should be indented with spaces. I also remove the file and line info to make the tree more readable.

I'm not sure what the other log statements are all about. Did you enable some extra logging or add your own?

I will look at the example code here next...

[dongryphon]

Ok found, a missing height property on the thirdpanel......

Yeah, that is a border layout and those cannot shrinkwrap.


It would be nice if these messages are more readable.

We should have an explicit error for that case. In general, though, it is hard to know where the root cause of layout failure lies. I have been tinkering with a better presentation for the layout, so any suggestions are welcome.


Width en Height set on center panels in the border layout will also crash the thing.

Yes, in 4.1 we always try to respect width or height (and min/maxWidth/Height) configurations. Even when other configurations are in conflict. Again, some targeted diagnostics for these problems would be good to add.