[CLOSED] Dashboard component doesn't display last column as expected [Archive]

plok77

Aug 05, 2021, 4:42 PM

The following code fragment should display a Dashboard component where the 5th column (the one that contains 'Widget 5') should span the entire width of its container. However, instead it only spans the width of the 4th column (the one that contains 'Widget 4').

Ext.define('Fiddle.Dashboard', {
extend: 'Ext.dashboard.Dashboard',
xtype: 'simple-dash',
renderTo: document.body,
maxColumns: 4,
columnWidths: [0.55, 0.45, 0.4, 0.6, 1],
parts: {
widget: {
viewTemplate: {
title: '{title}',
html: 'Widget 1'
}
}
},
defaultContent: [
{
title: 'Widget 1',
type: 'widget',
columnIndex: 0

},
{
title: 'Widget 2',
columnIndex: 1,
type: 'widget'
},
{
title: 'Widget 3',
columnIndex: 2,
type: 'widget'
},
{
title: 'Widget 4',
type: 'widget',
columnIndex: 3
},
{
title: 'Widget 5',
type: 'widget',
columnIndex: 4
}]
})
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.container.Container', {
plugins: ['viewport'],
layout: 'border',
items: [{
xtype: 'simple-dash',
region: 'center'
}]
})

Expected:

25549

Actual:

25550

If you reposition Widget 5 so that it occupies the full width of column 5 and then check the state of the component, it will report the column widths as the amounts shown above. However there appears to be a bug that is preventing this layout from being displayed as expected.

Regards

Paul

fabricio.murta

Aug 05, 2021, 6:29 PM

Hello Paul!

It would help if you provided context to make your sample work on a simple page, so we can reproduce exactly what you're seeing without much guesswork.

But the answer to your problem is pretty simple, after a little fiddling to make it work. If you say maxColumns is 4, then, well, it won't go past the 4th columnWidths you provided, and will repeat the last width over any repeating column.

Just increase the number to match how many values of columnWidths you want to provide and it should work the way you wanted. I can't deny though, the setting is a bit unclear (docs on maxColumns (https://docs.sencha.com/extjs/7.3.1/classic/Ext.dashboard.Dashboard.html#cfg-maxColumns)), or at least doesn't do what it says it should do. Thus, it leads to different possible interpretations, given there are "columns wrapping in rows" so we can't tell it means columns to a same row or columns spanning different rows.

Hope this helps!

P.s.: in the end I settled with this page code:

@page
@model ExtNet7WebPages_NuGet.Pages.Forums._6._3._0_2.t631 76_dashboardColWidthsModel
@{ Layout = null; }

<!DOCTYPE html>

<html>
<head>
<title>
63174 - Dashboard Column with 100% Width
</title>
</head>
<body>
<h1>
Dashboard Column with 100% Width
</h1>
<ext-component />
<script type="text/javascript">
Ext.define('Fiddle.Dashboard', {
extend: 'Ext.dashboard.Dashboard',
xtype: 'simple-dash',
renderTo: Ext.getBody(),
maxColumns: 5,
columnWidths: [0.25, 0.45, 0.4, 0.6, 1],
parts: {
widget: {
viewTemplate: {
title: '{title}',
html: 'Widget 1'
}
}
},
defaultContent: [{
title: 'Widget 1',
type: 'widget',
columnIndex: 0

}, {
title: 'Widget 2',
columnIndex: 1,
type: 'widget'
}, {
title: 'Widget 3',
columnIndex: 2,
type: 'widget'
}, {
title: 'Widget 4',
type: 'widget',
columnIndex: 3
}, {
title: 'Widget 5',
type: 'widget',
columnIndex: 4
}, {
title: 'Widget 6',
type: 'widget',
columnIndex: 5
}]
});

Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.container.Container', {
plugins: ['viewport'],
layout: 'border',
items: [{
xtype: 'simple-dash',
region: 'center'
}]
})
}
});
</script>
</body>
</html>

plok77

Aug 06, 2021, 1:23 PM

Thanks, setting maxColumns to 5 had the desired effect.

Regards

Paul

fabricio.murta

Aug 10, 2021, 3:17 AM

Glad it helped, and thanks for the feedback!