What's New?

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

  1. #1
    Aug 05, 2021, 4:42 PM

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

    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:

    Click image for larger version.  Name: expected.png  Views: 58  Size: 24.2 KB  ID: 25549

    Actual:

    Click image for larger version.  Name: actual.png  Views: 58  Size: 28.0 KB  ID: 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
    Last edited by fabricio.murta; Aug 10, 2021 at 3:17 AM.
  2. #2
    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), 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.t63176_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>
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter
  3. #3
    Aug 06, 2021, 1:23 PM
    Thanks, setting maxColumns to 5 had the desired effect.

    Regards

    Paul
  4. #4
    Aug 10, 2021, 3:17 AM
    Glad it helped, and thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert
    Ext.NETASP.NET UI Component framework
    RetypeDocumentation website generator
    MojeeLightning fast Emoji library for .NET
    Ext.NET Examples|Ext.NET API Docs|ExtJS API Docs|Twitter

Similar Threads

  1. [CLOSED] HideLabel doesn't work as expected
    By sveins12 in forum 4.x Legacy Premium Help
    Replies: 2
    Last Post: Mar 29, 2016, 2:03 PM
  2. [FIXED] [#938] [3.3] ComponentLoader for Component doesn't work
    By Yury in forum Bugs
    Replies: 1
    Last Post: Nov 18, 2015, 6:02 AM
  3. [CLOSED] How to update Component column value of one row on edit of component column of another row
    By PriceRightHTML5team in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Aug 21, 2014, 8:55 AM
  4. [CLOSED] Javascript error in component column having textfield as component of gridpanel
    By alscg in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 27, 2013, 10:18 PM
  5. Dataview doesn't work properly for dashboard(grouping)
    By gdog_5021 in forum 2.x Help
    Replies: 2
    Last Post: Sep 16, 2012, 3:57 PM

Posting Permissions