You found a bug! We've classified it as EXTJS-8494 . We encourage you to continue the discussion and to find an acceptable workaround while we work on a permanent fix.
  1. #1
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,743
    Vote Rating
    104
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default [4.2.0.265] Lockable Tree cannot be loaded on demand

    [4.2.0.265] Lockable Tree cannot be loaded on demand


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

    Code:
    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'],

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,824
    Vote Rating
    836
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


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

  3. #3
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,850
    Vote Rating
    610
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    How are you dynamically loading it?

    Code:
    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.
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  4. #4
    Sencha - Community Support Team mankz's Avatar
    Join Date
    Nov 2007
    Location
    Stockholm, Sweden
    Posts
    2,743
    Vote Rating
    104
    mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all mankz is a name known to all

      0  

    Default


    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.

    Code:
    [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)
    Code:
    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
                    }]
            });
        }
    };

Thread Participants: 2