ExtJS TreeGrid问题

Question

如果我在浏览器中运行下面的代码，我会得到界面的错误显示。问题是存在两个垂直滚动条，这两个滚动条在IE中比在FF中都可见。

下面是我使用的代码示例。

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

我不知道如何修复这个错误。

任何帮助都是非常感谢的。

谢谢你们所有人。

Answer 1

尽管这不是一个描述性的和全面的解释答案，但我还没有在我使用的TreeGrid上设置autoScroll (autoScroll: true)。但是，如果内容超出其容器的可见区域，我似乎仍然会得到滚动条。

Answer 2

尝试将除new Ext.ux.tree.TreeGrid({之外的所有autoScroll: true设置为autoScroll: false

Answer 3

我在这个组件上也遇到过同样的问题，它源于treepanel不能很好地处理边界布局。我建议将树放在包装器面板中，并在包装器面板上进行拉伸布局。然后在项目中设置包装器面板。