Results 1 to 10 of 10

Thread: ExtJs 5.1 Portal example dashboard - column layout bug?

    You found a bug! We've classified it as EXTJS-16808 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    27
    Vote Rating
    3
      0  

    Default ExtJs 5.1 Portal example dashboard - column layout bug?

    Im facing a big layout issue on the new ExtJS 5.1 portal example. Following code works in Browsers IE, Firefox, Chrome . After resizing or reordering the panels inside the dashboard, the dashboard seems to fail on layout for the last column. So last column switches below the column row, but is still part of the first row. I cannot find the issue since hours. Maybe someone can help me. The layout fails on every browser. I faced the same issues on trying to get the older Portal example below ExtJS 5 to run.
    Here is my Main.js:
    Code:
    Ext.define('ExtMVC.view.Main', {    extend: 'Ext.container.Container',
        
    	requires: [
    		'Ext.layout.container.Border',
    		'Ext.dashboard.Dashboard'
    	],	
    
    
    	layout: {
    	    type: 'border'
    	},
    	
    	items: [{
    	    id: 'app-header',
    	    xtype: 'container',
    	    cls: 'app-header',
    	    title: 'Header',
    	    region: 'north',
    	    height: 52
    	},{
    	    id: 'app-options',
    	    title: 'Options',
    	    region: 'west',
    	    animCollapse: true,
    	    width: 200,
    	    minWidth: 150,
    	    maxWidth: 400,
    	    split: true,
    		collapsible: true
    	},{
    	    xtype: 'dashboard',
    	    itemId: 'dashboard',
    	    reference: 'dashboard',
    	    region: 'center',
    	    stateful: false,
    	    columnWidths: [
    		    0.20,
    		    0.40,
    		    0.10,
    		    0.30
    	    ],
            parts: {
                portlet: {
    				viewTemplate: {
    					title: 'Panel',
    					layout: 'fit',
    			        items: [{
    			            xtype: 'panel'
    			        }]
    				}				
    			}            
            },	
    		defaultContent: [{
    			type: 'portlet',
    			title: 'Test1',
    		    columnIndex: 0,
    		    height: 500
    		}, {
    			type: 'portlet',
    			title: 'Test2',
    		    columnIndex: 1,
    		    height: 300
    		}, {
    			type: 'portlet',
    			title: 'Test3',
    		    columnIndex: 1,
    		    height: 300
    		}, {
    			type: 'portlet',
    			title: 'Test4',
    		    columnIndex: 2,
    		    height: 350
    		}, {
    			type: 'portlet',
    			title: 'Test5',
    		    columnIndex: 3,
    		    height: 350
    		}]
    	}]
    	
    });

    I dont know what to do

    Here are two screenshots showing the behaviour of the dashboard-columns and dashboard-panels when resizing/reordering:

    Good (have a look at the last column):
    Portal-Good.jpg

    Badhave a look at the last column):
    Portal-Bad.jpg

  2. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    27
    Vote Rating
    3
      0  

    Default

    This is what i got in Chrome Inspector:
    html.jpg

    Forelast column gets cls: 'x-dashboard-column-last' and last column splitter gets height of 0px or 1px.

  3. #3
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Vote Rating
    292
      0  

    Default

    Thanks for the report. Can you please post a test case which reproduces the issue?
    https://fiddle.sencha.com/#home

  4. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    27
    Vote Rating
    3
      0  

    Default

    STANDALONE TESTCASE:
    https://fiddle.sencha.com/#fiddle/idj

    Ext version tested:
    • Ext 5.0.1
    • Ext 5.1.0

    Browser versions tested against:
    • IE 8
    • IE 9
    • FF 35.0.1 (firebug 2.0.8 installed)
    • Chrome 40.0.2214.111

    Description:
    • If resize a column inside the dashboard, the last column sometimes switches into a new row, which is not intended. The forelast column then has the css cls 'x-dashboard-column-last' and last column splitter has a height of 0px or 1px.

    Steps to reproduce the problem:
    • Its not failing all the time (i cannot exactly define it), so maybe try more than one time:
    • Resize a column by little and little (increase/decrease) until the column switches

    The result that was expected:
    • The last column is in first row and by maximum size-increase of the forelast column to the right, the last column still has its min-size.

    The result that occurs instead:
    • The last column switches in the next row.

  5. #5
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Vote Rating
    292
      0  

    Default

    Thanks for the report! I have opened a bug in our bug tracker.

  6. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    27
    Vote Rating
    3
      0  

    Default

    Thank you very much.
    Do you know when its planned to get this bug fixed?

  7. #7
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Vote Rating
    292
      0  

    Default

    I'm afraid we can't offer a timeline for bug fixes.

  8. #8
    Sencha User
    Join Date
    Jun 2011
    Posts
    2
    Vote Rating
    0
      0  

    Default

    You should override Ext.layout.container.Dashboard - beginLayout to fix this issue.There are actually 2 reasons here, Ext calculation on widths and columnWidths, and floating point reason (0.4+0.2!=0.6 in your case).So to fix exact your issue, you can just round to 3 decimals at two points - width and totalWidth in mentioned function (width = Math.round(width*1000)/1000.My fix contains many other fixes also in this layout, so I don't paste it here not to confuse you.

  9. #9
    Sencha Premium User
    Join Date
    Feb 2016
    Posts
    1
    Vote Rating
    1
      1  

    Default

    Hi I was seeing an issue similar to this in Extjs 6.0.1 and the code is similar to v5. The problem occurs when you extend Dashboard and create your own dashboard class with columns and default content. The second instance of that dashboard will have the column problem.This comes from the deserializeItems function on dashboard. In it the line "delete partConfig.columnIndex;" deletes the column index. Tracing back partConfig reveals that it is a reference pointing to the original defaultContent. So when the second instance of the dashboard is created, there are no more columnIndexes in defaultContent, so all the parts default to 0, thus they are all put in the first column and the extra columns are not created.The fix: in initItems of dashboard clone the defaultContent and that fixes the problem. defaultContent = Ext.clone(me.defaultContent)That stops deserializeItems from changing the original defaultContent.

  10. #10
    Sencha Premium Member
    Join Date
    Feb 2016
    Posts
    12
    Vote Rating
    0
      0  

    Default

    I am seeing the same behavior in 6.5! Unfortunately, spending hours on trivial things like this makes me to get away from Sencha

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •