How to implement uitemplates by scrolling columns (not fix Columns)

Our Kanban Task Board for easy management of tasks and agile workflows
Post Reply
User avatar
lijuan.zhang
Posts: 4
Joined: Mon Dec 02, 2019 3:36 pm

How to implement uitemplates by scrolling columns (not fix Columns)

Post by lijuan.zhang » Sun Dec 08, 2019 6:05 pm

Hi team,

We tried to implement the kanban task board with the following uitemplates which has multiple tasks in progress stage.
https://www.bryntum.com/examples/taskboard-for-extjs/kitchensink/#examples/uitemplates

The above sample is implemented by fixing columns, while we want to implement it by scrolling the column (not fix column) because there many column on our board.

But when we set fixColumns:false, the progress stage can not be displayed.
NG.<br />The progress stage can not be displayed as long as we set fixColumns:false.
NG.
The progress stage can not be displayed as long as we set fixColumns:false.
1.jpg (50.65 KiB) Viewed 196 times
Only when we remove the code of fixColumns:false, the progress stage can be displayed.
2.jpg
2.jpg (14.02 KiB) Viewed 196 times
If we remove the setting of fixColumns:false, the progress stage can displayed.
If we remove the setting of fixColumns:false, the progress stage can displayed.
3.jpg (26.89 KiB) Viewed 196 times
How can we implement the above progress stage with fixColumns:false?

Best regards,
Thanks.

User avatar
Maxim Gorkovsky
Core Developer
Core Developer
Posts: 2994
Joined: Wed Jan 08, 2014 11:46 am

Re: How to implement uitemplates by scrolling columns (not fix Columns)

Post by Maxim Gorkovsky » Mon Dec 09, 2019 7:55 pm

Hello.
You need to configure ExtJS layout properly. E.g. you can get child panel visible if you set some width to it, apparently it cannot inherit it from the content.

Code: Select all

fitColumns : false,
items : [
  {
    xtype : 'panel',
    width : 500,
    items : [...]
  }
]

User avatar
lijuan.zhang
Posts: 4
Joined: Mon Dec 02, 2019 3:36 pm

Re: How to implement uitemplates by scrolling columns (not fix Columns)

Post by lijuan.zhang » Tue Dec 10, 2019 5:50 am

Hi,

Thank you for your reply.
We tried to set the width for child panel, but the columns still could not be seen.

I can’t understand the meaning of “apparently it cannot inherit it from the content.”
Could you give me a sample if possible?

User avatar
mats
Core Developer
Core Developer
Posts: 15154
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: How to implement uitemplates by scrolling columns (not fix Columns)

Post by mats » Tue Dec 10, 2019 11:51 am

Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

User avatar
mats
Core Developer
Core Developer
Posts: 15154
Joined: Sat Dec 19, 2009 11:41 pm
Location: Sweden
Contact:

Re: How to implement uitemplates by scrolling columns (not fix Columns)

Post by mats » Tue Dec 10, 2019 1:05 pm

Fixed now, you can try it in the next nightly build. Then use this definition of the demo TaskBoard

Code: Select all

Ext.define('Kanban.examples.uitemplates.view.TaskBoard', {
    extend : 'Kanban.view.TaskBoard',
    xtype  : 'uitemplatestaskboard',

    requires : [
        'Kanban.examples.uitemplates.view.TaskBoardController',
        'Kanban.examples.uitemplates.model.Task',
        'Kanban.examples.uitemplates.view.TaskEditor',
        'Kanban.examples.uitemplates.store.TaskStore',
        'Kanban.examples.uitemplates.store.UserStore',

        'Kanban.plugin.DragSelector'
    ],

    region         : 'center',
    enableUserMenu : false,
    controller     : 'taskboard',
    taskStore      : 'taskstore',
    resourceStore  : 'userstore',

    editor : {
        xtype : 'taskeditor'
    },

    bodyPadding : 2,

    taskMenu : {
        editorClass : 'Kanban.examples.uitemplates.view.TaskEditor'
    },
fitColumns : false,
    defaults : {
        width : 300
    },
    columns : [
        {
            state  : 'NotStarted',
            header : { height : 60 },
            title  : 'Not Started'
        },
        {
            xtype    : 'panel',
            title    : 'In Progress',
            cls      : 'split',
            flex     : 2,
            margin   : '0 2 0 2',
            padding  : 0,
            header   : {
                height  : 30,
                padding : 0,
                style   : 'text-align:center;border-bottom:2px solid #f6f6f6 !important'
            },
            defaults : {
                xtype   : 'taskcolumn',
                width    : 300,
                iconCls : '',
                header  : { height : 30, padding : 0 }
            },
            items    : [
                {
                    state     : 'InProgress',
                    title     : 'InProgress',
                    border    : '0 0 0 1',
                    bodyStyle : 'border-right:1px dashed #aaa !important'
                },
                {
                    state  : 'Test',
                    title  : 'Test',
                    border : '0 1 0 0'
                }
            ]
        },
        {
            state  : 'Done',
            header : { height : 60 },
            title  : 'Done'
        }
    ],

    viewConfig : {
        resourceImgTpl : '',
        multiSelect    : true,
        plugins        : 'kanban_dragselector',

        taskBodyTpl : '<div class="task-header">' +
        '<span class="task-id">ID: {Id} </span>' +
        '<span class="task-user">{[values.task.getResource() && values.task.getResource().getName()]}</span>' +
        '</div>' +
        '<div class="task-body">' +
        '<div class="sch-task-name">{Name}</div>' +
        '<img class="task-userimg" src="{[values.task.getResource() && values.task.getResource().get("ImageUrl") || "../resources/images/unknown.gif" ]}"/>' +
        '</div>',

        taskToolTpl : '<div class="task-footer">' +
        '<div class="task-progress"><div class="task-progress-inner" style="width:{PercentDone}%"></div></div>' +
        '<span class="task-chart x-fa fa-bar-chart" title="Show important numbers"></span>' +
        '<span class="task-calendar x-fa fa-calendar"></span>' +
        '<span class="task-done task-done-{[values.PercentDone === 100]} x-fa {[values.PercentDone < 100 ? "fa-circle" : "fa-check-circle" ]}"></span>' +
        '<span class="task-duration">{Duration}d</span>' +
        '</div>',

        // Enable smart diff update of the Task HTML contents
        onUpdate : function(store, record, operation, modifiedFieldNames) {

            var fragment = document.createElement('div');
            var currentNode = this.getNode(record);
            var selModel = this.getSelectionModel();

            this.tpl.overwrite(fragment, this.collectData([record]));
            Ext.fly(currentNode).syncContent(fragment.firstChild);

            selModel.onUpdate(record);
            if (selModel.isSelected(record)) {
                this.onItemSelect(record);
            }
        }
    },

    defaults : {
        margin : 0
    },

    initComponent : function() {
        var me = this;

        Ext.apply(me, {
            // Instance configuration here
        });

        me.callParent();
    }
});

Tired of debugging javascript errors in web applications? Try our new error logging service RootCause, or read more on the Sencha blog

@bryntum
Facebook
API documentation

Post Reply