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

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

Answer 2

尝试将autoScroll: true设置为autoScroll: false除new Ext.ux.tree.TreeGrid({

以外的所有{{1}}

Answer 3

我对这个组件遇到了同样的问题，它源于treepanel与边框布局不兼容。我建议将树放在包装面板中，并在包装​​面板上展开布局。然后在项目中设置包装器面板。