[INFO REQ] Employee images not displayed

Support for v6.x of our Scheduling components


Post Reply
User avatar
Apixu
Posts: 9
Joined: Tue Jun 23, 2020 8:21 pm

[INFO REQ] Employee images not displayed

Post by Apixu »

Hi,
I'm using scheduler version 6.1.7 but I cannot get my employee images being displayed in the scheduler grid.
My code is as follows:

Code: Select all

Ext.define('opm.view.planning.viewPlanningGeneral', {
    extend : 'Sch.panel.SchedulerGrid',
    xtype  : 'groupingschedulergeneral',

requires : [
    'Sch.feature.Grouping',
    'opm.model.modelSchedulerResource',
    'opm.model.modelSchedulerEvent'
],

title            : 'Grouping',
multiSelect      : true,
startDate        : new Date(2017, 0, 1),
endDate          : new Date(2017, 0, 31),
rowHeight        : 40,
barMargin        : 2,
border           : true,
bodyBorder       : true,
split            : true,
colorResources   : false,
scrollable       : true,
eventBorderWidth : 0,
dragConfig : { showTooltip : false },

resourceImagePath :  '../../../resources/images/users/' ,

lockedGridConfig : { width : 270 },

// Setup your static columns
columns : [
    {
        text    : 'Category',
        width     : 100,
        dataIndex : 'Category'
    },
    {
        text    : 'Staff',
        type      : 'resourceInfo',
        width     : 140,
        dataIndex : 'Name'
    },
    {
        text    : 'Employment type',
        flex      : 1,
        dataIndex : 'Type'
    }
],

// Default renderer, supplies data to be applied to the event template
eventRenderer : function (event, r, tplData, row, col, ds) {
    tplData.cls = r.get('Category');

    // Add data to be applied to the event template
    return event.getName();
},

// Customize preset
viewPreset : {
    name              : 'dayAndWeek',
    displayDateFormat : 'Y-m-d',
    timeResolution    : {
        unit      : Ext.Date.DAY,
        increment : 1
    }
},

// Store holding all resources, grouped by Category
resourceStore : {
    type       : 'resourcestore',
    groupField : 'Category', // Field to group resources by
    sorters    : [ 'Category', 'Name' ],
    model      : 'opm.model.modelSchedulerResource',

    data: [
            {Id: 'r1',  Name: 'Mike',    Category : 'Consultants', Type:'Full time', Image: 'Mike.jpg'},
            {Id: 'r2',  Name: 'Kevin',   Category : 'Consultants', Type:'Full time', Image: 'Kevin.jpg'},
            {Id: 'r3',  Name: 'Brett',   Category : 'Consultants', Type:'Full time', Image: 'Brett.jpg'},
            {Id: 'r4',  Name: 'Lars',    Category : 'Consultants', Type:'Full time', Image: 'Lars.jpg'},
            {Id: 'r5',  Name: 'Fred',    Category : 'Consultants', Type:'Full time', Image: 'Fred.jpg'},
            {Id: 'r10', Name: 'Matt',    Category : 'Sales',       Type:'Full time', Image: 'Matt.jpg'},
            {Id: 'r11', Name: 'Karl',    Category : 'Testers',     Type:'Full time', Image: 'Karl.jpg'},
            {Id: 'r12', Name: 'Pete',    Category : 'Testers',     Type:'Full time', Image: 'Pete.jpg'},
            {Id: 'r13', Name: 'Derek',   Category : 'Testers',     Type:'Full time', Image: 'Derek.jpg'},
            {Id: 'r14', Name: 'Alyssa',  Category : 'Testers',     Type:'Full time', Image: 'Alyssa.jpg'},
            {Id: 'r15', Name: 'Will',    Category : 'Testers',     Type:'Full time', Image: 'Will.jpg'},
            {Id: 'r16', Name: 'Ofelia',  Category : 'Research',    Type:'Full time', Image: 'Ofelia.jpg'},
            {Id: 'r17', Name: 'David',   Category : 'Research',    Type:'Full time', Image: 'David.jpg'},
            {Id: 'r18', Name: 'Ann',     Category : 'Research',    Type:'Full time', Image: 'Ann.jpg'},
            {Id: 'r20', Name: 'John',    Category : 'Research',    Type:'Full time', Image: 'John.jpg'}
    ]
},

// Store holding all the events
eventStore : {
    type     : 'eventstore',
    model    : 'opm.model.modelSchedulerEvent',

    data: [
            {Id : 'e1', Name : 'Client meeting', ResourceId : 'r1', StartDate : '2017-01-01', EndDate : '2017-01-02'},
            {Id : 'e2', Name : 'Performance review', ResourceId : 'r12', StartDate : '2017-01-03', EndDate : '2017-01-04'},
            {Id : 'e3', Name : 'Business trip', ResourceId: 'r13', StartDate : '2017-01-05', EndDate : '2017-01-06'},
            {Id : 'e6', Name : 'Sick leave', ResourceId : 'r4', StartDate : '2017-01-07', EndDate : '2017-01-08'},
            {Id : 'e23', Name : 'Out of office', ResourceId : 'r17', StartDate : '2017-01-02', EndDate : '2017-01-03'},
            {Id : 'ee1', Name : 'Internal meeting', ResourceId : 'r1', StartDate : '2017-01-06', EndDate : '2017-01-07'},
            {Id : 'ee2', Name : 'Milestone release', ResourceId : 'r2', StartDate : '2017-01-06', EndDate : '2017-01-07'},
            {Id : 'ee3', Name : 'Sales meeting', ResourceId : 'r3', StartDate : '2017-01-06', EndDate : '2017-01-07'},
            {Id : 'ee4', Name : 'Interviews', ResourceId : 'r4', StartDate : '2017-01-06', EndDate : '2017-01-07'}
    ]
},

// Store holding all the events
resourceZones  : {
    type     : 'eventstore',
    model    : 'opm.model.modelSchedulerEvent',

    data: [
            {Id : 'z01', Name : '', ResourceId : 'r1',  StartDate : '2017-01-01', EndDate : '2017-01-02'},
            {Id : 'z02', Name : '', ResourceId : 'r2',  StartDate : '2017-01-01', EndDate : '2017-01-02'},
            {Id : 'z03', Name : '', ResourceId : 'r3',  StartDate : '2017-01-01', EndDate : '2017-01-02'},
            {Id : 'z04', Name : '', ResourceId : 'r4',  StartDate : '2017-01-01', EndDate : '2017-01-02'},
            {Id : 'z05', Name : '', ResourceId : 'r5',  StartDate : '2017-01-01', EndDate : '2017-01-02'},
            {Id : 'z06', Name : '', ResourceId : 'r10', StartDate : '2017-01-01', EndDate : '2017-01-02'},
            {Id : 'z07', Name : '', ResourceId : 'r11', StartDate : '2017-01-01', EndDate : '2017-01-02'},
            {Id : 'z08', Name : '', ResourceId : 'r12', StartDate : '2017-01-01', EndDate : '2017-01-02'},
            {Id : 'z09', Name : '', ResourceId : 'r13', StartDate : '2017-01-01', EndDate : '2017-01-02'},
            {Id : 'z10', Name : '', ResourceId : 'r14', StartDate : '2017-01-01', EndDate : '2017-01-02'},
            {Id : 'z11', Name : '', ResourceId : 'r15', StartDate : '2017-01-01', EndDate : '2017-01-02'},
            {Id : 'z12', Name : '', ResourceId : 'r16', StartDate : '2017-01-01', EndDate : '2017-01-02'},
            {Id : 'z13', Name : '', ResourceId : 'r17', StartDate : '2017-01-01', EndDate : '2017-01-02'},
            {Id : 'z14', Name : '', ResourceId : 'r18', StartDate : '2017-01-01', EndDate : '2017-01-02'},
            {Id : 'z15', Name : '', ResourceId : 'r20', StartDate : '2017-01-01', EndDate : '2017-01-02'},

            {Id : 'z16', Name : '', ResourceId : 'r1',  StartDate : '2017-01-07', EndDate : '2017-01-09'},
            {Id : 'z17', Name : '', ResourceId : 'r2',  StartDate : '2017-01-07', EndDate : '2017-01-09'},
            {Id : 'z18', Name : '', ResourceId : 'r3',  StartDate : '2017-01-07', EndDate : '2017-01-09'},
            {Id : 'z19', Name : '', ResourceId : 'r4',  StartDate : '2017-01-07', EndDate : '2017-01-09'},
            {Id : 'z20', Name : '', ResourceId : 'r5',  StartDate : '2017-01-07', EndDate : '2017-01-09'},
            {Id : 'z21', Name : '', ResourceId : 'r10', StartDate : '2017-01-07', EndDate : '2017-01-09'},
            {Id : 'z22',  Name : '', ResourceId : 'r11', StartDate : '2017-01-07', EndDate : '2017-01-09'},
            {Id : 'z23',  Name : '', ResourceId : 'r12', StartDate : '2017-01-07', EndDate : '2017-01-09'},
            {Id : 'z24',  Name : '', ResourceId : 'r13', StartDate : '2017-01-07', EndDate : '2017-01-09'},
            {Id : 'z25', Name : '', ResourceId : 'r14', StartDate : '2017-01-07', EndDate : '2017-01-09'},
            {Id : 'z26', Name : '', ResourceId : 'r15', StartDate : '2017-01-07', EndDate : '2017-01-09'},
            {Id : 'z27', Name : '', ResourceId : 'r16', StartDate : '2017-01-07', EndDate : '2017-01-09'},
            {Id : 'z28', Name : '', ResourceId : 'r17', StartDate : '2017-01-07', EndDate : '2017-01-09'},
            {Id : 'z29', Name : '', ResourceId : 'r18', StartDate : '2017-01-07', EndDate : '2017-01-09'},
            {Id : 'z30', Name : '', ResourceId : 'r20', StartDate : '2017-01-07', EndDate : '2017-01-09'},

            {Id : 'z31',  Name : '', ResourceId : 'r1',  StartDate : '2017-01-14', EndDate : '2017-01-16'},
            {Id : 'z32',  Name : '', ResourceId : 'r2',  StartDate : '2017-01-14', EndDate : '2017-01-16'},
            {Id : '33',  Name : '', ResourceId : 'r3',  StartDate : '2017-01-14', EndDate : '2017-01-16'},
            {Id : 'z34',  Name : '', ResourceId : 'r4',  StartDate : '2017-01-14', EndDate : '2017-01-16'},
            {Id : 'z35',  Name : '', ResourceId : 'r5',  StartDate : '2017-01-14', EndDate : '2017-01-16'},
            {Id : 'z36',  Name : '', ResourceId : 'r10', StartDate : '2017-01-14', EndDate : '2017-01-16'},
            {Id : 'z37',  Name : '', ResourceId : 'r11', StartDate : '2017-01-14', EndDate : '2017-01-16'},
            {Id : 'z38',  Name : '', ResourceId : 'r12', StartDate : '2017-01-14', EndDate : '2017-01-16'},
            {Id : 'z39',  Name : '', ResourceId : 'r13', StartDate : '2017-01-14', EndDate : '2017-01-16'},
            {Id : 'z40', Name : '', ResourceId : 'r14', StartDate : '2017-01-14', EndDate : '2017-01-16'},
            {Id : 'z41', Name : '', ResourceId : 'r15', StartDate : '2017-01-14', EndDate : '2017-01-16'},
            {Id : 'z42', Name : '', ResourceId : 'r16', StartDate : '2017-01-14', EndDate : '2017-01-16'},
            {Id : 'z43', Name : '', ResourceId : 'r17', StartDate : '2017-01-14', EndDate : '2017-01-16'},
            {Id : 'z44', Name : '', ResourceId : 'r18', StartDate : '2017-01-14', EndDate : '2017-01-16'},
            {Id : 'z45', Name : '', ResourceId : 'r20', StartDate : '2017-01-14', EndDate : '2017-01-16'},

            {Id : 'z46',  Name : '', ResourceId : 'r1',  StartDate : '2017-01-21', EndDate : '2017-01-23'},
            {Id : 'z47',  Name : '', ResourceId : 'r2',  StartDate : '2017-01-21', EndDate : '2017-01-23'},
            {Id : 'z48',  Name : '', ResourceId : 'r3',  StartDate : '2017-01-21', EndDate : '2017-01-23'},
            {Id : 'z49',  Name : '', ResourceId : 'r4',  StartDate : '2017-01-21', EndDate : '2017-01-23'},
            {Id : 'z50',  Name : '', ResourceId : 'r5',  StartDate : '2017-01-21', EndDate : '2017-01-23'},
            {Id : 'z51',  Name : '', ResourceId : 'r10', StartDate : '2017-01-21', EndDate : '2017-01-23'},
            {Id : 'z52',  Name : '', ResourceId : 'r11', StartDate : '2017-01-21', EndDate : '2017-01-23'},
            {Id : 'z53',  Name : '', ResourceId : 'r12', StartDate : '2017-01-21', EndDate : '2017-01-23'},
            {Id : 'z54',  Name : '', ResourceId : 'r13', StartDate : '2017-01-21', EndDate : '2017-01-23'},
            {Id : 'z55', Name : '', ResourceId : 'r14', StartDate : '2017-01-21', EndDate : '2017-01-23'},
            {Id : 'z56', Name : '', ResourceId : 'r15', StartDate : '2017-01-21', EndDate : '2017-01-23'},
            {Id : 'z57', Name : '', ResourceId : 'r16', StartDate : '2017-01-21', EndDate : '2017-01-23'},
            {Id : 'z58', Name : '', ResourceId : 'r17', StartDate : '2017-01-21', EndDate : '2017-01-23'},
            {Id : 'z59', Name : '', ResourceId : 'r18', StartDate : '2017-01-21', EndDate : '2017-01-23'},
            {Id : 'z60', Name : '', ResourceId : 'r20', StartDate : '2017-01-21', EndDate : '2017-01-23'},

            {Id : 'z61',  Name : '', ResourceId : 'r1',  StartDate : '2017-01-28', EndDate : '2017-01-30'},
            {Id : 'z62',  Name : '', ResourceId : 'r2',  StartDate : '2017-01-28', EndDate : '2017-01-30'},
            {Id : 'z63',  Name : '', ResourceId : 'r3',  StartDate : '2017-01-28', EndDate : '2017-01-30'},
            {Id : 'z64',  Name : '', ResourceId : 'r4',  StartDate : '2017-01-28', EndDate : '2017-01-30'},
            {Id : 'z65',  Name : '', ResourceId : 'r5',  StartDate : '2017-01-28', EndDate : '2017-01-30'},
            {Id : 'z66',  Name : '', ResourceId : 'r10', StartDate : '2017-01-28', EndDate : '2017-01-30'},
            {Id : 'z67',  Name : '', ResourceId : 'r11', StartDate : '2017-01-28', EndDate : '2017-01-30'},
            {Id : 'z68',  Name : '', ResourceId : 'r12', StartDate : '2017-01-28', EndDate : '2017-01-30'},
            {Id : 'z69',  Name : '', ResourceId : 'r13', StartDate : '2017-01-28', EndDate : '2017-01-30'},
            {Id : 'z70', Name : '', ResourceId : 'r14', StartDate : '2017-01-28', EndDate : '2017-01-30'},
            {Id : 'z71', Name : '', ResourceId : 'r15', StartDate : '2017-01-28', EndDate : '2017-01-30'},
            {Id : 'z72', Name : '', ResourceId : 'r16', StartDate : '2017-01-28', EndDate : '2017-01-30'},
            {Id : 'z73', Name : '', ResourceId : 'r17', StartDate : '2017-01-28', EndDate : '2017-01-30'},
            {Id : 'z74', Name : '', ResourceId : 'r18', StartDate : '2017-01-28', EndDate : '2017-01-30'},
            {Id : 'z75', Name : '', ResourceId : 'r20', StartDate : '2017-01-28', EndDate : '2017-01-30'}
    ]
},

initComponent : function () {
    var me = this;

    var resLabel = new Ext.form.Label({
        style : 'font-weight:bold',
        text  : 15
    });

    Ext.apply(me, {
        features : [
            // Grouping feature, to display resources in groups
            {
                id                 : 'group',
                ftype              : 'scheduler_grouping',
                groupHeaderTpl     : '{name}',
                hideGroupedHeader  : true,
                enableGroupingMenu : false,

            }
        ]

    });

    me.callParent();
},

 
});

The structure of my web application is as follows (to check that the imagePathUrl is correct).
I tried both following configurations for imagePathUrl:
../../../resources/images/users/ (= relative path to view)
/resources/images/users/ (= relative path to index.html)
Both do not solve the issue.

FE
|
+---app
| | Application.js
| | Application.scss
| |
| +---model
| | modelSchedulerEvent.js
| | modelSchedulerResource.js
| |
| +---store
| |
| \---view
| |
| +---planning
| viewPlanningGeneral.js
| viewPlanningGeneralSelectedUsersTemplates.js
| viewPlanningGeneralSelectedUsersTemplatesController.js
| viewPlanningGeneralUsersSelected.js
| viewPlanningGeneralUsersSelectedController.js
| viewPlanningGeneralUsersToSelect.js
|
|
+---resources
|
+---css
| | fontawesome.css
| | opm.css
| |
| \---scheduler
| sch-all-debug.css
|
+---dictionaries
| Dutch.js
| English.js
| French.js
|
|
+---images
| |
| \---users
| Alyssa.jpg
| Ann.jpg
| Brett.jpg
| David.jpg
| Derek.jpg
| Fred.jpg
| John.jpg
| Karl.jpg
| Kevin.jpg
| Lars.jpg
| lola.jpg
| Matt.jpg
| Mike.jpg
| Mike2.jpg
| Pete.jpg
| Will.jpg
|
\---urls


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

Re: [INFO REQ] Employee images not displayed

Post by mats »

We could not reproduce this issue. To assist you with your question, please provide more details including a runnable test case (as described in our support guidelines).

To get the fastest possible support, provide a simple test case based on our standard examples.

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
Apixu
Posts: 9
Joined: Tue Jun 23, 2020 8:21 pm

Re: [INFO REQ] Employee images not displayed

Post by Apixu »

I solved it by using a templatecolumn as follows:

Code: Select all

        {
            xtype     : 'templatecolumn',
            header    : 'Staff',
            sortable  : true,
            flex      : 1,
            dataIndex : 'Name',
            resizable : false,
            tpl       : '<img src="resources/images/users/{[values.Name]}.jpg" /><dl><dt>{Name}</dt><dd>{Type}</dd></dl>'
        }

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

Re: [INFO REQ] Employee images not displayed

Post by mats »

That's nice, thanks for sharing!

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