1. #1
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,344
    Vote Rating
    134
    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 Diagnosing layout failures

    Diagnosing layout failures


    (Update 7-March-2012: the new Page Analyzer described in the blog post has better visualization of layout failures -- removing Sticky on this thread)

    First off we want to thank everyone who has downloaded 4.1PR and especially those who have reported their findings. Your input is greatly appreciated.

    To assist in this process, we have created a layout "diagnostic layer" that can be used to help isolate the root cause of layout failures. It is enabled by adding a couple script tags after Ext. The two files are not included in normal builds and so cannot be loaded by the dynamic loader (at present). They are located in the src/diag/layout folder in the downloaded zip:

    PHP Code:
       <script src="ext-all-debug.js"></script>
       <script src="src/diag/layout/ContextItem.js"></script>
       <script src="src/diag/layout/Context.js"></script> 
    You will need a debug console to view the results.

    For the vast majority of users, these diagnostics will simply indicate that a layout failure has occurred. Beyond that failure, you can expect problems including JS errors. If a layout failure has occurred, then, it is best to focus only on that issue and not on any subsequent behaviors.

    For those that want to write custom layouts, the details from the diagnostic can help identify where results stalled but it will take some time and practice to sort through all the data provided.

    A good run will generate a report that says "SUCCESS" while a failed run says "FAILURE". In a failed run, the layout tree is written to the console with "++" indicating completed layouts and "--" indicating unfinished layouts. Something like this (where I have highlighted the missing values):

    Code:
    -- viewport<absolute>
          triggeredBy: count=3
             ext-gen1003.containerChildrenDone:dom () dirty: false, setBy: ?
             ext-gen1003.height (954) dirty: false, setBy: viewport<autocomponent>
             ext-gen1003.width (1670) dirty: false, setBy: viewport<autocomponent>
       --testA<dock> - ownerCt: viewport
             triggeredBy: count=3
                testA.height (110) dirty: false, setBy: testA<dock>
                testA.width (250) dirty: false, setBy: testA<dock>
                testA_header.height () dirty: false, setBy: ?
          --testA_header<body> - ownerCt: testA
                triggeredBy: count=2
                   testA_header.contentHeight () dirty: false, setBy: ?
                   testA_header.width (250) dirty: false, setBy: testA<dock>
          --testA_header<hbox> - ownerCt: testA
                triggeredBy: count=2
                   testA_header-body.width (239) dirty: false, setBy: testA_header<body>
                   tool-1015.width (15) dirty: false, setBy: tool-1015<autocomponent>
             ++testA_header_hd<autocomponent>
             ++tool-1015<autocomponent>
       --testA<autocontainer> - ownerCt: viewport
             triggeredBy: count=3
                testA-body.height () dirty: false, setBy: testA<dock>
                testA-body.width (250) dirty: false, setBy: testA<dock>
                testA.containerChildrenDone:dom (true) dirty: false, setBy: ?
       ++component-1014<autocomponent>
    In the above, I deliberately forced the hbox layout to not publish contentHeight (a value published by container layouts when autoHeight) which caused the body layout to stall since it needed that value (it is triggeredBy it) in order to calculate the header's height. This in turn caused the dock layout to stall because it needed the height to dock the header component. Finally, the viewport was waiting for all of its child items to complete before it could perform its final steps.

    Hopefully this tool will be of some assistance externally. It has been of great value to us internally as we have been working out the interactions between the many layout managers in Ext JS.
    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!"

  2. #2
    Ext JS Premium Member stevil's Avatar
    Join Date
    Nov 2007
    Location
    Denver, CO
    Posts
    1,045
    Vote Rating
    9
    stevil will become famous soon enough

      0  

    Default


    I'll definitely be looking at this, as I have a custom field layout that I use extensively.

  3. #3
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,344
    Vote Rating
    134
    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


    There is a lot of documentation on the new layout system in layout/Context. It is largely up to date, but needs review since it was written over a month ago.

    Feel free to ask questions about custom layouts of course.

    I have it on my TODO list to see about simplifying the guts of calculateBodyNaturalWidth and just measure the outer el. There were issues with this in the past, but I think they are largely historical now or will be when I finish up the rest of the "autoWidth" magic... er, logic
    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!"

  4. #4
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,344
    Vote Rating
    134
    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 stevil View Post
    I'll definitely be looking at this, as I have a custom field layout that I use extensively.
    @stevil,

    The field layouts have changed dramatically since PR1. I hope the docs on Base and Labelable explain the new "decorator" tpl's... they could be enough to avoid an override of fieldSubTpl and might be enough to avoid writing a custom layout altogether.

    I am very curious to hear your mileage on the new (low-calc) layouts for field.
    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
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    48
    Vote Rating
    0
    andasoft is on a distinguished road

      0  

    Default


    Some panel layout is bad at the first showing. After switched from other tabs, it become normal. Why?
    For example:
    1st show:
    1st show.jpg

    2nd show:
    2nd show.jpg

  6. #6
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Vote Rating
    323
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    @andasoft. Which version are you using? Are you able to provide a test case? Does this happen consistently across all browsers? Did this work against a previous version and if so which version was it?

  7. #7
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    48
    Vote Rating
    0
    andasoft is on a distinguished road

      0  

    Default


    The problem version is 4.1 beta2, it works well in version 4.0.7. Its performance is the same in Chrome and Firefox.

    Example:
    HTML Code:
    <html><head>    <title></title>
        <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">    <script type="text/javascript" src="extjs/ext-all-debug.js"></script>    <script type="text/javascript">Ext.require([    'Ext.grid.*',	'Ext.form.*',    'Ext.layout.*']);        Ext.onReady(function() {           
            var basicInfoForm = Ext.widget('form', {            frame:true,            border:false,            renderTo:Ext.getBody(),            layout:'column',            fieldDefaults: {                labelWidth:80,                labelAlign:'right'            },            defaults:{columnWidth:.25},
                items:[                {                    xtype:'textfield',                    name: 'fmsBizCode',                    fieldLabel: '业务单号',                    readOnly: true                },                {                    xtype:'textfield',                    name: 'devCode',                    fieldLabel: '出库单号',                    readOnly: true                },                                {                    fieldLabel:'联系人',                    xtype:'textfield',                    labelWidth:80,                    name:'contactName'                },
                    {                    fieldLabel:'联系电话',                    xtype:'textfield',                    labelWidth:80,                    name:'phoneNumber'                },                {                    fieldLabel:'收货地址',                    xtype:'textfield',                    allowBlank:false,                    labelWidth:80,                    columnWidth:.5,                    name:'location'                },                {                    xtype:'numberfield', allowBlank:false,                    name: 'splitPcs',                    minValue:0,                    fieldLabel: '深层拣选数',                    labelWidth:80                },                               {                    xtype:'numberfield', allowBlank:false,                    name: 'boxes',                    minValue:0,                    fieldLabel: '纸箱数',                    labelWidth:80                },                {                    xtype:'numberfield', allowBlank:false,                    name: 'labels',                    minValue:0,                    fieldLabel: '标签数',                    labelWidth:80                },                {                    xtype:'datefield',                    fieldLabel: '实际送货日期',                    allowBlank:false,                    name: 'actualShipmentDate',                    format: 'Y-m-d',                    labelWidth:80                },                {                    xtype:'timefield',                    fieldLabel: '实际送货时间',                    allowBlank:false,                    name: 'actualShipmentTime',                    format: 'H:i:s',                    labelWidth:80                },                {                    xtype:'textfield',                    fieldLabel: '备注',                    name: 'memo',                    columnWidth:.75,                    labelWidth:80                },                    {                    xtype:'numberfield',                    fieldLabel: '栈板数',                    name: 'pltsNumber',                    labelWidth:80                }            ],            tbar:[                {                    xtype:'button',                    text:'保存',                    iconCls:'silk-save',                    itemId:'saveBasicInfoBtn'                },                '-',                {                    text: '完成拣货',                    iconCls: 'silk-accept',                    disabled:true,                    itemId:'closeCaseBtn'                },                {                    itemId:'forceToCloseCheckbox',                    disabled:true,                    boxLabel: '<font color="red">强制完成拣货</font>',                    xtype: 'checkbox'                },                '-',                {                    text:'结案',                    disabled:true,                    iconCls:'silk-door',                    itemId:'closeBtn'                },                '-',                {                    itemId:'discardBtn',                    text : '作废',                    iconCls: 'silk-discard'                },                '-',                {                    xtype:'displayfield',                    fieldLabel:'状态',                    margin:'5 5 5 5',                    labelAlign:'right',                    labelWidth:30,                    name:'displayStatus',                    value:'已接受'                },                '-',                {                    text:'转为组任务',                    iconCls:'silk-book-go',                    itemId:'transferBtn'                }            ]        });
            });
        </script>
    </head><body></body></html>

  8. #8
    Ext JS Premium Member
    Join Date
    Aug 2011
    Posts
    48
    Vote Rating
    0
    andasoft is on a distinguished road

      0  

    Default


    the zip file.
    Attached Files

  9. #9
    Ext JS Premium Member
    Join Date
    May 2009
    Posts
    72
    Vote Rating
    1
    UGA_Zimma is on a distinguished road

      0  

    Default


    Am I reading this right? Is the root cause for the layout failure the deepest node in my diagnoses tree?

  10. #10
    Sencha - Ext JS Dev Team dongryphon's Avatar
    Join Date
    Jul 2009
    Posts
    1,344
    Vote Rating
    134
    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 UGA_Zimma View Post
    Am I reading this right? Is the root cause for the layout failure the deepest node in my diagnoses tree?
    If you post the raw JSON data I can look at it and see, but the tree displays Red icons for failed layouts and Orange icons for containers with failed child layouts. The key to understanding the root cause is the Triggers which represent the data flow between the layouts. That takes some time to see the patterns there but what you are looking for is some unknown variable (a trigger) that *should* be knowable at the moment of the failure.

    Often times the failure comes down to a situation where the layout definition is somehow contradictory and no solution can be found, but it can also be a bug. On that front, there is a bug fix in recent nightly builds to do with constraint handling.
    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!"