1. #1
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,111
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default How to interpret the Layout log?

    How to interpret the Layout log?


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

    Code:
    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

    Code:
    ++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)

  2. #2
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,111
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    Its getting me this error

    Code:
    [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()

  3. #3
    Ext JS Premium Member tvanzoelen's Avatar
    Join Date
    Apr 2008
    Location
    Groningen - Netherlands
    Posts
    1,111
    Vote Rating
    30
    tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about tvanzoelen has a spectacular aura about

      0  

    Default


    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.

  4. #4
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,295
    Vote Rating
    121
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    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...
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

  5. #5
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,295
    Vote Rating
    121
    dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all dongryphon is a name known to all

      0  

    Default


    Quote Originally Posted by tvanzoelen View Post
    Ok found, a missing height property on the thirdpanel......
    Yeah, that is a border layout and those cannot shrinkwrap.

    Quote Originally Posted by tvanzoelen View Post
    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.

    Quote Originally Posted by tvanzoelen View Post
    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.
    Don Griffin
    Ext JS Development Team Lead

    Check the docs. Learn how to (properly) report a framework issue and a Sencha Cmd issue

    "Use the source, Luke!"

Thread Participants: 1