Sencha modern + example tree with locked columns

[pincherhgz]

we integrated the example into our app, this is the adapted code:

    class TreeModel extends bryntum.grid.GridRowModel {
        static get fields() {
            return [
                'Id',
                'Name',
                { name : 'StartDate', dateFormat : 'YYYY-MM-DD' },
                'Duration',
                'PercentDone',
                // Remap the built in readOnly field to use our locked field as its data source
                { name : 'readOnly', dataSource : 'Locked' }
            ];
        }
    }
    TreeModel.idField = 'Id';
    var view = Ext.create('Ext.Panel',{
      layout     : 'fit',
      height:'100%',
      id:'structureSurferGrid',
      items : [
          {
            title     : 'Bryntum Grid',
            xtype     : 'bryntumtreegridpanel',
            itemId    : 'grid',
            reference : 'treeGridPanel',
            features : {
                cellEdit     : true,
                filter       : true,
                stripe       : true,
                tree         : true,
                regionResize : true
            },

        loadMask : 'Loading tree data...',

        columns : [
            {
                text   : 'Name',
                field  : 'Name',
                width  : 400,
                type   : 'tree',
                locked : true //Set locked to true then the column will be displayed on the left side of the grid
            },
            {
                type    : 'widget',
                text    : 'Widget column',
                field   : 'PercentDone',
                width   : 150,
                locked  : true,
                widgets : [{ type : 'slider', showValue : false }]
            },
            {
                text   : 'Percent',
                type   : 'percent',
                field  : 'PercentDone',
                locked : true,
                width  : 250
            },
            {
                text   : 'Start',
                field  : 'StartDate',
                width  : 150,
                type   : 'date',
                format : 'YYYY-MM-DD'
            },
            {
                text     : 'End',
                field    : 'StartDate',
                width    : 150,
                renderer : ({ value, record }) => value && bryntum.grid.DateHelper.format(bryntum.grid.DateHelper.add(value, record.Duration, 'day'), 'YYYY-MM-DD'), //Calculate the endDate based on duration
                editor   : false //Switch editing off.
            },
            {
                text  : 'Duration',
                field : 'Duration',
                width : 150,
                type  : 'number',
                unit  : ' days'
            },
            {
                text     : 'Number of Subtasks',
                editor   : false,
                field    : 'children',
                width    : 150,
                type     : 'number',
                renderer : ({ value }) => value ? value.length : 0
            },
            {
                text     : 'Started',
                field    : 'PercentDone',
                width    : 150,
                renderer : ({ value }) => value > 0 ? 'Yes' : 'No',
                editor   : false
            },
            {
                text     : 'In Progress',
                field    : 'PercentDone',
                width    : 150,
                renderer : ({ value }) => value > 0 && value < 100 ? 'Yes' : 'No',
                editor   : false
            },
            {
                text     : 'Complete',
                field    : 'PercentDone',
                width    : 150,
                renderer : ({ value }) => value === 100 ? 'Yes' : 'No',
                editor   : false
            },
            {
                text     : 'Reference',
                field    : 'Id',
                width    : 150,
                renderer : ({ value }) => '#' + bryntum.grid.StringHelper.encodeHtml(value),
                editor   : false
            }
        ],
        store : {
            modelClass :  TreeModel,
            readUrl    : 'data/data.json', //Because readUrl is used, an AjaxStore will be initiated
            autoLoad   : true
        }

      }
  ]
});
view.down('#grid')._grid._element.addEventListener('change', e => {
    if (e.target.type === 'range') {
        const slider = e.target,
            record = view.down('#grid')._grid.getRecordFromElement(slider);

        record.PercentDone = slider.value;
    }
}, true);

the grid shows the structure exactly like in the example but without data (see both screenshots). Any idea ?

[pincherhgz]

classes we added see attachments

[mats]

Can you please upload a ZIP with full code so we can run it and debug?

[pincherhgz]

ok, we try to take out all our core connectivity to create you a reduced example. Please advise how we can configure the store.modelClass directly in the object instead of

class TreeModel extends bryntum.grid.GridRowModel {
        static get fields() {
            return [
                'Id',
                'Name',
                { name : 'StartDate', dateFormat : 'YYYY-MM-DD' },
                'Duration',
                'PercentDone',
                // Remap the built in readOnly field to use our locked field as its data source
                { name : 'readOnly', dataSource : 'Locked' }
            ];
        }
    }
    TreeModel.idField = 'Id';

to make the example more compact.

May be more easyly you can just take your grid ext modern example and exchange it with your tree with locked columns example mentioned above

[mats]

            readUrl    : 'data/data.json', //Because readUrl is used, an AjaxStore will be initiated

Can you please share the data in the data.json file too?

[pincherhgz]

we are just using your example data, see the screen shots above

[mats]

Please always provide us with the context we request. We have 200+ demos, not possible to guess which data you used I'm afraid.

[pincherhgz]

ok, sorry, we are just using the delivered information and reference to the shipment, the example in the shipment is lockedcolumnstree and the data you can find in the attachment

[pincherhgz]

as the attachment size is to low this is a dropbox link for the download

https://www.dropbox.com/s/0ohy7kuso3j0ytk/WEBApp-Grid-Debug.zip?dl=0

attached an update of the TreeGridPanel, but behavior is just the same

[mats]

Seems not all bits were copied from our demo, but delete the marked line below and all works fine:

  cfg = {
                    cls     : 'x-layout-fit-item',
                    columns : me.getColumns(), // DELETE
                    store   : me.getStore()
                };