Question

有时会发生我的树状面板的滚动条不再起作用。虽然仍然可以移动滚动条，但树根本不会移动。这在我和Firefox以及Chrome中都会发生。

以下是我的树状面板的来源：



var treeStore = Ext.create('Ext.data.TreeStore', {
    proxy: {
        type: 'ajax',
        url: '../tree.pl'
    }
});

var tree = Ext.create('Ext.tree.Panel', {
    store: treeStore,
    renderTo: 'tree',
    title: 'Tree',
    width: 400,
    height: 450,
    rootVisible:false,
    dockedItems: [{
        xtype: 'toolbar',
        dock: 'bottom',
        items: [
        {
            xtype: 'tbspacer',
            width: 340
        },
        {
            text: 'Search',
            handler: function(){
                        names = [];
                        Ext.Array.each(tree.getView().getChecked(), function(rec){
                            names.push(rec.get('text'));
                        });

                    resultStore.load({
                        params:{
                            search_type: 'tree',
                            tree_nodes: names.join('II'),
                        }
                    });
                }
    }
    ]
}]


});

Answer 1

我遇到了同样的问题。他们使用自定义滚动条，它很漂亮（特别是在chrome中）。要删除自定义滚动条，请将以下内容添加到配置中：

var tree = Ext.create('Ext.tree.Panel', {
  scroll          : false,
  viewConfig      : {
    style           : { overflow: 'auto', overflowX: 'hidden' }
  },
  // ...
});

我还没有尝试过使用treepanel。但它对于gridpanel非常有效（因为树和网格都只是Ext.panel的扩展。但是，解决方案也适用于treepanel）。

Answer 2

自定义滚动条将在Ext 4.1中再次被原生滚动替换。虚拟化的滚动条旨在支持无限滚动，列锁定等，但我相信它们已经设法解决了这些问题并仍然保留了原生滚动条。如果4.0.x中的当前问题因此而得到解决，我会感到惊讶。

Answer 3

在EXT 4.0中，位于主库资源下的ext-all.css文件中，这是不起作用的真正原因。这个css文件的编码器决定网格单元应该有overflow: hidden;（在第3324行附近）：

.x-grid-cell {
    overflow: hidden;
    font: normal 13px tahoma, arial, verdana, sans-serif;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -webkit-user-select: none;
    cursor: default
}

.x-grid-cell-inner {
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    padding: 3px 6px;
    white-space: nowrap
}

最好的办法是将溢出设置为继承两个类，这个问题神奇地消失了。

唯一剩下的就是网格表的边框，但只需在css中放置CSS样式就可以解决这个问题。我建议不要将它放在ext-all.css文件中。

.x-grid-table {
    border: none !important;
    width: auto !important;     
}

请记住，对于使用.x-grid-cell的任何样式，都会更改它。

Answer 4

我正在使用Ext 4.0.7。

scroll：true

适合我。但是，出于某种原因，有人补充说：

布局：锚点

到treepanel的配置，导致它停止工作。如果您发现scroll: true无效，请尝试查看某人是否添加了布局并将其删除。

希望有所帮助。

extjs树面板中的滚动条不起作用

4 个答案: