[4.2.0.265] Lockable Tree cannot be loaded on demand

[mankz]

Since locked tree is now hybrid tree + grid, it should add Ext.grid.Panel to its requires, otherwise it cannot be loaded on demand.

Ext.define('Ext.tree.Panel', {
    extend: 'Ext.panel.Table',
    alias: 'widget.treepanel',
    alternateClassName: ['Ext.tree.TreePanel', 'Ext.TreePanel'],
    requires: ['Ext.tree.View', 'Ext.selection.TreeModel', 'Ext.tree.Column', 'Ext.data.TreeStore'],

[mitchellsimoens]

Thanks for the report! I have opened a bug in our bug tracker.

[evant]

How are you dynamically loading it?

Ext.onReady(function() {

    //we want to setup a model and store instead of using dataUrl
    Ext.define('Task', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'task',     type: 'string'},
            {name: 'user',     type: 'string'},
            {name: 'duration', type: 'string'},
            {name: 'done',     type: 'boolean'}
        ]
    });

    var store = Ext.create('Ext.data.TreeStore', {
        model: 'Task',
        proxy: {
            type: 'ajax',
            //the store will get the content from the .json file
            url: 'treegrid.json'
        },
        folderSort: true
    });

    //Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
    var tree = Ext.create('Ext.tree.Panel', {
        title: 'Core Team Projects',
        width: 500,
        height: 300,
        renderTo: Ext.getBody(),
        collapsible: true,
        useArrows: true,
        rootVisible: false,
        store: store,
        multiSelect: true,
        singleExpand: true,
        columns: [{
            locked: true,
            xtype: 'treecolumn', //this is so we know which column will show the tree
            text: 'Task',
            width: 200,
            sortable: true,
            dataIndex: 'task'
        },{
            //we must use the templateheader component so we can use a custom tpl
            xtype: 'templatecolumn',
            text: 'Duration',
            flex: 1,
            sortable: true,
            dataIndex: 'duration',
            align: 'center',
            //add in the custom tpl for the rows
            tpl: Ext.create('Ext.XTemplate', '{duration:this.formatHours}', {
                formatHours: function(v) {
                    if (v < 1) {
                        return Math.round(v * 60) + ' mins';
                    } else if (Math.floor(v) !== v) {
                        var min = v - Math.floor(v);
                        return Math.floor(v) + 'h ' + Math.round(min * 60) + 'm';
                    } else {
                        return v + ' hour' + (v === 1 ? '' : 's');
                    }
                }
            })
        },{
            text: 'Assigned To',
            flex: 1,
            dataIndex: 'user',
            sortable: true
        }, {
            text: 'Edit',
            width: 40,
            menuDisabled: true,
            xtype: 'actioncolumn',
            tooltip: 'Edit task',
            align: 'center',
            icon: '../simple-tasks/resources/images/edit_task.png',
            handler: function(grid, rowIndex, colIndex, actionItem, event, record, row) {
                Ext.Msg.alert('Editing' + (record.get('done') ? ' completed task' : '') , record.get('task'));
            },
            // Only leaf level tasks may be edited
            isDisabled: function(view, rowIdx, colIdx, item, record) {
                return !record.data.leaf;
            }
        }]
    });
});

I just ran the below with the latest nightly and it loads everything up.

[mankz]

Hmm, you're right it does seem to work now when I try it. Though still, sync loading is used if user doesn't specify Grid upfront.

[Ext.Loader] Synchronously loading 'Ext.grid.Panel'; consider adding Ext.require('Ext.grid.Panel') above Ext.onReady

ext-dev.js (line 8732)
GET http://lh/extjs-4.2.0.265/src/grid/Panel.js?_dc=1360017447153
	
200 OK
		6ms	
ext-dev.js (line 10408)
GET http://lh/extjs-4.2.0.265/src/grid/View.js?_dc=1360017447182
	
200 OK
		30ms	
ext-dev.js (line 10408)

Ext.ns('App');

Ext.require([
    'Ext.data.*',
    'Ext.tree.Panel'
]);

Ext.onReady(function () {
    App.Scheduler.init();
});

App.Scheduler = {

    // Bootstrap function
    init: function () {
        Ext.define('Event', {
            extend : 'Ext.data.Model',
            fields: [
                'Type',
                'EventType',
                'Title',
                'Location'
             ]
        });

        // Store holding all the events
        var eventStore = Ext.create("Ext.data.TreeStore", {
            model   : 'Event'
        });

        var ds = Ext.create("Ext.tree.Panel", {
            renderTo    : document.body,
            store      : eventStore,
            columns : [{
                xtype : 'treecolumn',
                locked : true
            },
                {
                    width : 400
                }]
        });
    }
};