ExtJS TreeGrid problem

If I run the code below in a browser I get an error display of m开发者_如何学JAVAy 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.

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.

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

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.