Dashboard not repecting columnIndex

[saga56]

I have a tab panel where I had some panels, in this case two DashBoards.

When the page load, this two tabs are created from the same Dashboard, but only the first dashboard will go ok, the next ones will have the "parts" not in order (you can see the images down below)

I have a maxColumns to 3 and for each portlet I have height and columnIndex.

My "parts" is like:

 parts: {
        portlet1: {
            viewTemplate: {
                reference: 'portlet1',
                closable: false,
                collapsible: false,
                tools: [{
                        type: 'gear',
                        handler: 'gearEvent'
                    }, {
                        type: 'toggle',
                        handler: 'toggleEvent'
                    }, {
                        type: 'close',
                        handler: 'closePart'
                    }],
                items: {
                    xtype: 'panel',
                    layout: 'center',
                    items: [{
                            xtype: 'button',
                            iconCls: 'icon-action-add',
                            handler: 'addChartEvent'
                        }]
                }
            }
        }

In "defaultContent " I have 6 of this portlets.

    defaultContent: [{
            type: 'portlet1',
            columnIndex: 0,
            height: 200
            }
        }

So I have 2 of this dashboards in my tab panel, but only the first one respect the configuration has the images:
This one is right:
Screen Shot 2019-04-29 at 13.49.10.jpg

this one is wrong:

Screen Shot 2019-04-29 at 13.49.18.jpg


What is this?? this is so simple and can't understand whats wrong.

Anyone?


Thanks for you time guys.

[saga56]

So I am still stuck in this..

What I've found:

When the first Dashboard is loading every defaultContent has a 'columnIndex' number. When the second dashboard is loading he doesn't have 'columnIndex', and so he put all parts on index 0.

Can't understand this behaviour.

My code:

Ext.define('MyApp.view.dashboard.DashboardPanel', {
    extend: 'Ext.dashboard.Dashboard',
    alias: 'widget.dashboardpanel',
    requires: [
        'Ext.chart.*',
        'MyApp.view.dashboard.DashboardController',
        'MyApp.view.dashboard.ChartConfigChart'
    ],
    controller: 'dashboardcontroller',
    maxColumns: 3,
    parts: {
        portlet1: {
            viewTemplate: {
                reference: 'portlet1',
                title: '',
                closable: false,
                collapsible: false,


            }
        },


    },
//    defaultContent:[],
    defaultContent: [{
            type: 'portlet1',
            columnIndex: 0,


        },{
            type: 'portlet1',
            columnIndex: 1,


        },{
            type: 'portlet1',
            columnIndex: 2,


        },{
            type: 'portlet1',
            columnIndex: 0,


        },{
            type: 'portlet1',
            columnIndex: 1,


        },{
            type: 'portlet1',
            columnIndex: 2,
        }


    ],


    initComponent: function () {
        var me = this;


        me.callParent(arguments);
    }
});

[saga56]

So I am still stuck on this.

What I discover:

When the Daschboards are loading, the first one has a 'columnIndex' on each defaultContent, but the second Dashboard doesn't. Can figure it out why, the code is so simple.

My code:

Ext.define('MyApp.view.dashboard.DashboardPanel', {
    extend: 'Ext.dashboard.Dashboard',
    alias: 'widget.dashboardpanel',
    requires: [
        'Ext.chart.*',
        'MyApp.view.dashboard.DashboardController',
        'MyApp.view.dashboard.ChartConfigChart'
    ],
    controller: 'dashboardcontroller',
    maxColumns: 3,
    parts: {
        portlet1: {
            viewTemplate: {
                reference: 'portlet1',
                title: '',
                closable: false,
                collapsible: false,
            }
        }
    },
    defaultContent: [{
            columnIndex: 0,
            type: 'portlet1',
        },{
            columnIndex: 1,
            type: 'portlet1',
        },{
            columnIndex: 2,
            type: 'portlet1',
        },{
            columnIndex: 0,
            type: 'portlet1',
        },{
            columnIndex: 1,
            type: 'portlet1',
        },{
            columnIndex: 2,
            type: 'portlet1',
        }
    ],


    initComponent: function () {
        var me = this;
        me.callParent(arguments);
    }
});

[maciej.zabielski]

Hi

I have found the same issue - in my case it was going to and from dashboard like shown here:
https://fiddle.sencha.com/#fiddle/2ub9&view/editor

The index 0 is assigned because to start with, the second dashboard will only get one column when the layout is initialised.
I'm also not that proficient in debugging Ext and understanding how the layout is built.
Is it possible that there is some global variable leaking? There must be something pre-set from previous run that is causing this.

Sencha support suggests using state management to resolve this, but in your case that would be useless and I do not like this "solution".

Have you found any better fix for that?

/Maciej

[saga56]

I now store the state from the window, but that didn't solve my problem.

What I did:
I store the state from the dashboard, so in my initComponent I apply it to dashboard. (problem persist), thenI iterate my defaultContent items and set the columnIndex by hand, since I have the state accessible I know the part I have in the forEach (by reference or other identification), here I set the column index by hand.

[maciej.zabielski]

Thanks for the update, in my case I end up with one narrow column, so I guess that if I would change the column index, I would end up with this:
chrome_2019-08-05_09-03-24.png

Instead of this:

Dash.png

The Dashboard seems to be so untested in any real world scenario, and has so many bugs and problems.
Even adding a new part on the fly, WHY all the meths are private? It's a one big mess.. and the little things - you can't even set the Cls as the config is not handled properly.

[maciej.zabielski]

The culprit is this method: deserializeItems

I was convinced that these method is only used for state management, but it seems to be parsing default config as well

Ext.define(null, {    override: 'Ext.dashboard.Dashboard',


    deserializeItems: function(serialized) {
        var me = this,
            length = serialized.length,
            columns = [],
            columnWidths = me.columnWidths,
            maxColumns = me.getMaxColumns(),
            column, columnIndex, columnWidth, i, item, partConfig;


        var _serialized = Ext.clone(serialized);
        for (i = 0; i < length; ++i) {
            partConfig = _serialized[i];
            columnIndex = Math.min(partConfig.columnIndex || 0, maxColumns - 1);


            //This will delete config from CLASS!
            delete partConfig.columnIndex;
            if (!(column = columns[columnIndex])) {
                columns[columnIndex] = column = me.createColumn();
                columnWidth = columnWidths && columnWidths[columnIndex];
                if (columnWidth) {
                    column.columnWidth = columnWidth;
                }
            }
            item = me.createView(partConfig);
            column.items.push(item);
        }
        for (i = 0 , length = columns.length; i < length; ++i) {
            column = columns[i];
            if (!column.columnWidth) {
                column.columnWidth = 1 / length;
            }
        }
        return columns;
    }
});

Maybe someone had some idea about deleting column index from default config, but PLEASE! Removing this from class.... form DEFAULT config.... seriously? Can someone tell me whats the point?
The result is that you default will be applied only on the first run, and on the second run all widgets (parts) will have no index, and get index 0....

I don't know if that breaks any other lousy logic, but you can give it a try (at your own risk of course)...

Regards,
Maciej

---------------------
UPDATE:
I have now moved to working on clone instead of removing delete command, as it will be used for merging with current state during Serialise operation. Now it seems to create object according to defaults and also return correct values for the Serialize operation.

UPDATE II
Bug number for this: EXTJS-28580