ExtJS TreeGrid problem

Question

If I run the code below in a browser I get an error display of my interface. The problem is the presence of two vertical scrollbars that are visible with both IE than with FF.

Below is an example of the code I'm using.

Ext.onReady(function() {
Ext.QuickTips.init();

var tree = new Ext.ux.tree.TreeGrid({
    title: 'Core Team Projects',
    enableDD: true,
    defaultSortable: false,
    enableSort: false,
    autoScroll: true,
    columns:[
    {
        header: 'Task',
        dataIndex: 'task',
        width: 230
    },{
        header: 'Duration',
        width: 100,
        dataIndex: 'duration',
        align: 'center',
        sortType: 'asFloat',
        tpl: new 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');
                }
            }
        })
    },{
        header: 'Assigned To',
        width: 150,
        dataIndex: 'user'
    },{
        header: 'Test',
        width: 150,
        dataIndex: '',
        tpl: new Ext.XTemplate(
            'test'
        )
    }],

    dataUrl: '/QgenQueryBuilder/testtreegrid/treegrid-data.json.asp'
});

var mainQueryPanel = new Ext.Panel({
        id:'mainQueryPanel',
        region: 'center',
        layout:'fit',
        margins:'0 0 0 0',
        title:'Workspace',
        header:true,
        border:true,
        draggable:false,
        collapsible:false,
        collapsed:false,
        autoScroll:true,
        hidden: false,
        items:[tree]
    });

var mainDataPanel = new Ext.Panel({
        id:'mainDataPanel',
        activeItem: 0,
        region: 'south',
        layout: 'card',
        title:'Risultato interrogazione',
        margins:'0 0 0 0',
        height:290,
        header:true,
        border:true,
        draggable:false,
        collapsible:true,
        collapsed:false,
        autoScroll:false,
        hidden: false,
        split:true
});

var mainCenterPanel = new Ext.Panel({
        xtype: 'panel',
           id: 'mainCenterPanel',
        layout: 'border',
        region: 'center',
        autoScroll: false,
        margins: '2 0 5 5',
        items:[mainQueryPanel,mainDataPanel]
    });



var mainViewport =new Ext.Viewport({
    layout: 'border',
    //title: 'Ext Layout Browser',
    items: [{
        id: 'content-panel',
        region: 'center', // this is what makes this panel into a region within the containing layout
        layout: 'card',
        margins: '2 5 5 0',
        activeItem: 0,
        border: false,
        disabled: false,
        items: [mainCenterPanel]
    }]
});
});

I have no idea how to fix this error.

Any help is appreciated.

Thank you all.

Answer 1

I've had this same problem with this component, it roots from treepanel not working well with border layouts. I suggest putting the tree in a wrapper panel, and have it stretch layout on wraper panel. Then set the wrapper panel in your items.

Answer 2

Try setting all the autoScroll: true to autoScroll: false except new Ext.ux.tree.TreeGrid({

Answer 3

Even though its not a descriptive and thoroughly explaining answer, I haven't set the autoScroll (autoScroll: true) on the TreeGrid I use. But it seems like I still get the scrollbars if the contents exceeds the visible area of its container.